React Native - 嵌套屏幕之间的导航答案

【问题标题】：React Native - Navigation between nested screensReact Native - 嵌套屏幕之间的导航
【发布时间】：2021-08-29 17:41:48
【问题描述】：

我已经阅读了有关在反应导航版本 5 的嵌套屏幕之间导航的文档。但是，我仍然遇到问题下面是我的 App.js 的代码

export default function App() {
  return (
    <NavigationContainer>
      <Provider store={store}>
          <Stack.Navigator initialRouteName="Login"
          headerMode={'none'}>
            <Stack.Screen name="Login" component={Login}></Stack.Screen>
            <Stack.Screen name="BottomTabs" component={BottomTabs}></Stack.Screen>
          </Stack.Navigator>
      </Provider> 
    </NavigationContainer>
  );
}

下面是“BottomTabs”组件的代码：-

export default function BottomTabs() {
    return (
        <Tab.Navigator initialRouteName="Profile">
            <Tab.Screen name="Profile"component={Profile}></Tab.Screen>
            <Tab.Screen name="Gobble" component={GobbleNavigator}></Tab.Screen>
            <Tab.Screen name="Matches" component={Matches}></Tab.Screen>
            <Tab.Screen name="Chats" component={ChatRoom}></Tab.Screen>
        </Tab.Navigator>
    )
}

在“个人资料”屏幕中，我有一个退出按钮，单击该按钮会执行一个功能，我调用props.navigation.navigate('BottomTabs', {screen: 'Login'}) 以转到登录页面。

我也尝试过其他方法，例如 navigation.navigate('BottomTabs', {screen: 'App', params: {screen: 'Login'}) 和 navigation.navigate('Login')

但是，当我单击按钮时，没有任何反应。我在这里做错了什么？

【问题讨论】：

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

【解决方案1】：

每个屏幕都应该有一个名称。

假设登录屏幕被称为“登录”，那么如果您想点击一个按钮导航到登录屏幕，您应该可以这样做：

<Button title="Signout" 
onPress={() => 
this.props.navigation.navigate('Login') } 
/>

但是，如果您正在执行注销操作，则应先删除当前登录的数据 --- 在导航到登录屏幕之前。

【讨论】：