如何处理 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，当从主页按下后退按钮时，该应用程序会退出。一切都很好，我已经检查过当按下后退按钮时后处理程序被调用。

但是当我切换到任何其他选项卡然后 return 到主页并按返回退出应用程序时，后处理程序停止工作并且应用程序显示错误 "The action 'GO_BACK'was not handled by any navigator. Is there any screen to go back to?"

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

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

Answer 1

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

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

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

Answer 2

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

问题是我试图从屏幕本身处理 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 3

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>

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

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

How to handle back button behavior in bottom tabs in React Native?

android

react-native

react-navigation

react-navigation-bottom-tab