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

【问题标题】：How to handle back button behavior in bottom tabs in React Native?如何处理 React Native 底部选项卡中的后退按钮行为？
【发布时间】：2020-07-30 18:11:42
【问题描述】：

当我的应用打开时，我有一个 @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'操作？

【问题讨论】：

标签： android react-native react-navigation react-navigation-bottom-tab

【解决方案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 中以这种方式工作，在其他屏幕中和往常一样。

【讨论】：

你拯救了我，成就了我的一天。为你鼓掌。
我已经结束了这样的事情！谢谢！

【解决方案2】：

React Navigation（版本 5）已经处理了底部选项卡上的原生后退按钮。

我被这个问题困扰了一天，尝试了很多方法。

我最终在 react-navigation version_5 中发现他们只包含了一行。 https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior

将属性 backBehaviour = "initialRoute" 添加到您的中，它将处理选项卡上的所有本机后退按钮

 <Tab.Navigator backBehaviour = "initialRoute" >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
 </Tab.Navigator>

【讨论】：

【解决方案3】：

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

我现在正在尝试更多地在标签导航器中使用 backBehavior 来尝试获得我想要的流程。

在这里写下我的问题让我更清楚地了解了我的问题！

【讨论】：

然后结果是？

【解决方案4】：

我的回答与您的问题无关。但我希望它会帮助你。我创建了一个自定义挂钩来处理所有底部选项卡中的后按。

// back handler hook
import React from 'react';
import {useEffect} from 'react';
import {BackHandler} from 'react-native';

export const useBackButton = (props, handler) => {
    useEffect(() => {
        props.navigation.addListener('focus', () => {
            BackHandler.addEventListener('hardwareBackPress', handler);
        });
        props.navigation.addListener('blur', () => {
            BackHandler.removeEventListener('hardwareBackPress', handler);
        });
    }, [handler]);
};

现在我在主屏幕上添加了这个

   const onBackPress = () => {
        BackHandler.exitApp();
        return true;
    };
    useBackButton(props, onBackPress);

在其他屏幕中我添加了以下内容。

   const onBackPress = () => {
        props.navigation.goBack();
        return true;
    };
        useBackButton(props, onBackPress);

【讨论】：