Question

我已阅读有关 React 导航版本 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')

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

Answer 1

应该有一个与每个屏幕相关联的名称。

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

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

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

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

1 个答案: