React Native — Навигация между вложенными экранами

#reactjs #react-native #react-navigation #react-native-navigation #react-navigation-v5

Вопрос:

Я прочитал документацию, касающуюся навигации между вложенными экранами для react navigation версии 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')

Однако, когда я нажимаю на кнопку, ничего не происходит. Что я здесь делаю не так?

Ответ №1:

С каждым экраном должно быть связано имя.

Предполагая, что экран входа в систему известен как «Вход», то, если вы хотите нажать кнопку для перехода на экран входа в систему, вы должны иметь возможность сделать это следующим образом:

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

 

Однако, если вы выполняете операцию выхода, вам следует сначала сказать, что вы удалили свои текущие данные, вошедшие в систему,- — — прежде чем вы перейдете на экран входа в систему.