如何使用React Native tvOS / Android TV正确处理导航堆栈

Question

我正在使用react-native-tvos构建一个tvOS和Amazon FireStick应用程序。但是我在反应导航方面遇到了问题。添加到导航堆栈的屏幕在后台仍处于活动状态。这导致焦点引擎感到困惑。使用遥控器上的方向键，焦点将在堆栈底部的不可见屏幕和当前显示的屏幕之间切换。我正在寻找有关如何解决此问题的建议。

我读到其他人在反应导航和反应本机导航中都遇到了这个问题。但是我没有找到解决方法。

Answer 1

如果使用的是react-native-tvos版本，请遵循其仓库中的this issue。

关于临时解决方案，我建议您自己隐藏您的内容。看看我的实现：

import React from "react";
import { View } from "react-native";

// That's a HOC to know when the current Screen is focused
import withScreenFocusing from "../components/HOC/WithScreenFocusing";

const FocusHider = ({ isFocused, children }) => {
  return (
    <View style={{ display: isFocused ? "flex" : "none" }}>{children}</View>
  );
};

export default withScreenFocusing(FocusHider);

然后使用它：

 <FocusHider>
   <YourAwesomeContent />
 </FocusHider>

以防万一，我提到的HOC只是useIsFocused中的@react-navigation/native