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

当我的应用程序打开时，我有一个@react导航/底部选项卡导航器，其内容如下：

    <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>

}
backBehavior={“历史记录”}
>

我的代码中有一个BackHandler，当从主页上按下后退按钮时，应用程序将退出。一切都很好，我检查了backhandler是否在按下back按钮时被调用

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

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

如何处理这个“返回”操作？

我在所有选项卡中使用backhandler创建了一个我想要的导航流。事实证明这是问题的根源。从rest选项卡中删除BackHandler后，应用程序现在运行平稳

我现在尝试在tab navigator中使用backBehavior进行更多实验，以获得我想要的流量

---

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

我也面临着类似的问题，只要找出解决办法就行了

问题是，我试图从屏幕本身处理backHandler，但它与tab navigator（以及react navigator作为一个整体？我不知道）的工作方式不同

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

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

现在，backHandler函数仅在主屏幕中以这种方式工作，与其他屏幕一样。

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

// 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]);
};

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

我最终在react导航版本_5中发现，他们只在一行中包含了它。

将prop backBehaviour=“initialRoute”添加到您的和，它将处理选项卡上的所有本机后退按钮

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

---

我的答案与你的问题无关。但我希望它能帮助你。我创建了一个自定义的钩子来处理所有底部标签的后压

// 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);

---

你救了我，成就了我的一天。给你重重一击，结果是什么？