#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') }
/>
Однако, если вы выполняете операцию выхода, вам следует сначала сказать, что вы удалили свои текущие данные, вошедшие в систему,- — — прежде чем вы перейдете на экран входа в систему.