6

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

4

4 回答 4

5

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

问题是我试图从屏幕本身处理 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 中以这种方式工作，在其他屏幕中也照常工作。

于 2020-07-22T09:30:10.100 回答
3

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

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

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

将道具 backBehaviour = "initialRoute" 添加到您的 <Tab.Navigator/> 中，它将处理选项卡上的所有本机后退按钮

 <Tab.Navigator backBehaviour = "initialRoute" >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
 </Tab.Navigator>
于 2020-12-11T02:34:21.987 回答
1

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

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

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

于 2020-04-17T10:24:40.087 回答
0

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

// 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);
于 2020-12-11T17:06:02.340 回答