如何在反应导航 5 中的选项卡导航器中的选项卡屏幕之间移动？答案

【问题标题】：How to move between tab screens in tab navigator in react navigation 5?如何在反应导航 5 中的选项卡导航器中的选项卡屏幕之间移动？
【发布时间】：2020-11-22 06:59:25
【问题描述】：

<NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name="Home" component={HomeStack} />
        <Tabs.Screen name="Discover" component={Discover} />
      </Tabs.Navigator>
    </NavigationContainer>

我在 Home Stack 中有一个搜索组件...而且我在 Discover 中有一个搜索按钮，它可以让我在 Home Stack 中搜索组件但是当我使用navigator.back() 时，它把我带到了主组件而不是发现组件 HomeStack 中的 Stack navigator 是这样的：

<Stack.Navigator initialRouteName="HomeScreen">
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="SearchScreen"
        component={SearchScreen} // this is the search component
      />
    </Stack.Navigator>

我希望后退按钮将我带到最后一个屏幕，而不是该堆栈的根屏幕

【问题讨论】：

您可以尝试使用this.props.navigation.dispatch(NavigationActions.back()) 代替goBack() 吗？见this issue
@RafaelTavares 使用 this.props.navigation.dispatch(NavigationActions.back()) 给我错误 The action 'Navigation/BACK' was not handled by any navigator.

标签： javascript reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

如果您执行以下操作，它将非常有效并且更容易组织。

首先，您将在主 js 文件中创建 StackNavigator，在本示例中为 App.js。您也将创建一个文件夹来存储您的屏幕（在这种情况下，我将调用 src）

App.js 将如下所示：

import HomeScreen from '../src/screens/HomeScreen .js // importing screens
import SearchScreen from '../src/screens/SearchScreen.js
.
.
.

const navigator = createStackNavigator(
    {
        Screen1Ref: HomeScreen,
        Screen2Ref: SearchScreen ,
        .
        .
        .
    },
    {
        initialRouteName: 'HomeScreen ',
        defaultNavigationOptions: {
            title: 'name',
        },
    }
);

export default createAppContainer(navigator);

第二，您将创建您的屏幕和export default 每个屏幕，并将其导入您的 App.js 文件中，其中将列出屏幕（导入并接收一键），您将创建你的导航器。

在您的屏幕中，您将使用navigation.navigate('key') 导航到任何屏幕。看例子：

const ScreeExample = ({navigation}) => {
     return (
          <Text>Testing</Test>
          navigation.navigate('Screen1Ref')
     )
}
export default ScreenExample

我可以向您推荐一种更简单的方法，并且还可以使用按钮返回上一屏幕。

【讨论】：