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

Posted 2023-04-15

【中文标题】如何使用 React Native tvOS / Android TV 正确处理导航堆栈

【英文标题】：How to properly handle a navigation stack with React Native tvOS / Android TV

【发布时间】：2020-01-18 18:55:50

【问题描述】：

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

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

【参考方案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

【参考方案2】：

我一直在从事 androidTV 项目，但遇到了的焦点问题 也反应原生导航。 当我导航到其他屏幕时，Touchable 组件的焦点被忽略。 我设法通过添加 react-native-screens 包（其中 react-native-navigation 将其定义为必须依赖项）来解决这个问题，然后在我的 app.js 中添加：

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

那么焦点已经按预期恢复工作了。

我希望它对你有用。

【讨论】：

我有一个问题，返回到屏幕时的焦点总是转到第一个可触摸组件，而不是触发第二个屏幕显示的组件。你能帮帮我吗？