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

Question

我已经阅读了有关在反应导航版本 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>
    )
}

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

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

但是，当我单击按钮时，什么也没有发生。 我在这里做错了什么？

Answer 1

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

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

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

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