如何处理 React Native 底部选项卡中的后退按钮行为？

Question

当我的应用程序打开时，我有一个@react-navigation/bottom-tabs导航器，其内容如下：

    <Tab.Navigator
        tabBarOptions={{
            activeTintColor: '#77dd77',
            inactiveTintColor: 'gray',
        }}
        tabBar={props => <MyTabBar {...props} />}
        backBehavior={"history"}
        >
        <Tab.Screen
            name="Home"
            component={Home}
            options={{ title: 'Home' }}
        />
        <Tab.Screen
            name="Orders"
            component={Orders}
            options={{ title: 'Orders' }}
        />
        <Tab.Screen
            name="Profile"
            component={Profile}
            options={{ title: 'Profile' }}
        />
    </Tab.Navigator>

我的代码中有一个BackHandler，可以在从主页按下后退按钮时使应用程序退出。一切都很好，我已经检查了按下后退按钮时是否会调用后处理程序。

但是，当我切换到任何其他选项卡，然后返回主页并按返回退出应用程序时，后台处理程序停止工作并且应用程序显示错误“任何导航器均未处理操作“GO_BACK”。是否有任何屏幕可以返回到？”

这是仅用于开发的警告，但在签名版本中，应用程序不会显示任何错误，甚至不会退出。

我该如何解决这个“GO_BACK”操作？

Answer 1

我遇到了类似的问题，刚刚找到解决方案。

问题是我试图从屏幕本身处理 backHandler，但它不能像选项卡导航器那样工作（也许整个反应导航？我不知道）。

无论如何，您只需要为“focus”（~componentDidMount）和“blur”（~componentWillUnmount）添加一个监听器，如下所示：

        <Tab.Screen name="Home" component={HomeScreen} 
          listeners={{ focus: () => BackHandler.addEventListener('hardwareBackPress',handleBackButton)
                      ,blur: () => BackHandler.removeEventListener('hardwareBackPress',handleBackButton)
          }}
        />

在哪里：

function handleBackButton  ()  {
  BackHandler.exitApp();
  return true;
}

现在 backHandler 函数仅在 HomeScreen 中以这种方式工作，在其他屏幕中也像往常一样工作。

Answer 2

我在所有选项卡中使用后台处理程序来创建我想要的导航流程。事实证明这是造成问题的原因。从其余选项卡中删除后台处理程序后，该应用程序现在可以顺利运行。

我现在尝试在选项卡导航器中尝试使用backBehavior进行更多实验，以尝试获得我想要的流程。

在这里写下我的问题让我对我的问题有了更清晰的认识！