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

Question

我正在使用react-native-tvos构建一个tvOS和亚马逊FireStick应用程序。然而，我遇到了一个关于反应导航的问题。添加到导航堆栈的屏幕在后台仍处于活动状态。这会导致焦点引擎变得混乱。使用遥控器上的方向垫，焦点将在堆叠底部的不可见屏幕和当前显示的屏幕之间移动。我正在寻找关于如何解决这个问题的建议。

我读到过其他人在使用react导航和react本地导航时遇到过这个问题。但我没有找到解决方案。

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

Answer 2

我一直在从事AndroidTV项目的工作，并且遇到了以下问题

react-本地导航也是如此。当我导航到其他屏幕时，可触摸组件的焦点被忽略。

我设法解决了这个问题，添加了react-native-screens包( react-native-navigation将其定义为一个必须依赖项)，然后在我的app.js中添加了：

import {enableScreens} from 'react-native-screens';
enableScreens();

然后，焦点已经如预期的那样返回工作。

我希望它能为你工作。