我正在使用 react-native-tvos 构建一个 tvOS 和 Amazon FireStick 应用程序。但是我遇到了反应导航的问题。添加到导航堆栈的屏幕在后台仍处于活动状态。这会导致焦点引擎混淆。使用遥控器上的方向键，焦点将在堆栈底部的不可见屏幕和当前显示的屏幕之间切换。我正在寻找有关如何解决此问题的建议。
我读到其他人在使用 react-navigation 和 react-native-navigation 时遇到过这个问题。但我没有找到解决办法。
【问题讨论】：
标签： react-native react-navigation tvos android-tv
如果您使用的是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
【讨论】：
我一直在从事 AndroidTV 项目，但遇到了
的焦点问题
也反应原生导航。
当我导航到其他屏幕时，Touchable 组件的焦点被忽略。
我设法通过添加 react-native-screens 包（其中 react-native-navigation 将其定义为必须依赖项）来解决这个问题，然后在我的 app.js 中添加：
import {enableScreens} from 'react-native-screens';
enableScreens();
那么焦点已经按预期恢复工作了。
我希望它对你有用。
【讨论】：