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

Question

我正在使用react-native-tvos构建tvOS和Amazon FireStick应用程序。然而我遇到了 react 导航的问题。添加到导航堆栈的屏幕在后台仍然处于事件状态。这会导致焦点引擎变得困惑。使用 Remote 上的方向键，焦点将在堆栈底部的不可见屏幕和当前显示的屏幕之间移动。我正在寻找有关如何解决此问题的建议。

我读到其他人在使用react-navigation和react-native-navigation时也遇到过这个问题。但我没有找到解决方案。

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 只是来自 @react-navigation/native 的 useIsFocused