Попробуйте это:
Я не вижу ссылки на вашу страницу Login в стеке, поэтому измените _this.props.navigation.navigate('Login'); на _this.props.navigation.navigate('SignUp');
Лучший способ обработки аутентификации и составления стека вашей навигации
- Используйте
createSwitchNavigator для обработки корневых стеков, для вашего приложения это будет примерно так:
const AppNavigator = createSwitchNavigator(
{
Loading: LoadingScreen, // Include a loading screen that will check authentication state
Auth: AuthNavigator,
Main: MainNavigator
},
{
initialRouteName: 'Loading',
// Other configs
}
)
AuthStack это будет иметь все ваши логин. экраны регистрации, приветствия и т. д., как-то так:
const AuthStack = createStackNavigator(
{
SignUp: { screen: SignUp },
ForgetPassword: {screen: ForgetPassword},
// Include other screens here if applicable
},
{
initialRouteName: 'SignUp'
// Other configs
}
)
В
MainStack будут все экраны вашего приложения, из того, что вы показали в своем вопросе, это будет выглядеть примерно так:
const MainStack = createStackNavigator(
{
Master: { screen: ({ navigation })=>(<MyMastSreen data={item} navigation={navigation} design={design} isRoot={true} />) },
Categories: { screen: ({ navigation })=>(<MyCategoriesSreen data={item} navigation={navigation} design={design} isRoot={item.category_first} subMenus={[]} />) },
MasterSUB: { screen: ({ navigation })=>(<MyCategoriesSreen data={{'categorySetup':item}} navigation={navigation} design={design} isRoot={true} subMenus={item.subMenus} />) },
Details: { screen:({ navigation })=>(<MyDetailsSreen data={item} navigation={navigation} design={design} isRoot={true}/>) },
DineIn: { screen:({ navigation})=>(<MyDineInScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
Gallery: { screen:({ navigation })=>(<MyGallerySreen data={item} navigation={navigation} design={design} />) },
WebSub: { screen: ({ navigation })=>(<MyWebSreen data={item} navigation={navigation} design={design} isRoot={true} fromNotification={true} />) },
NotificationsSub: { screen: ({ navigation })=>(<MyNotificationsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
OrdersSub: { screen: ({ navigation })=>(<MyOrdersSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
TicketsSub: { screen: ({ navigation }) => (<MyTicketSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} isRoot={false} />) },
OrderDetail: { screen: ({ navigation })=>(<MyOrderDetailSreen data={item} navigation={navigation} design={design}/>) },
DineInOrders: { screen: ({ navigation })=>(<MyDineInOrderScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
// DineInOrderDetail: { screen: ({ navigation })=>(<MyDineInOrderDetailScreen data={item} navigation={navigation} design={design}/>) },
ProfileSettingsSub: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
SubProfile: { screen: ({ navigation })=>(<MyProfileSreen data={item} navigation={navigation} design={design} isRoot={false} />)},
ProfileSettings: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} />) },
ListOfUsersSub: { screen:({ navigation })=>(<MyListOfUsersSreen data={item} navigation={navigation} design={design} />) },
Chats: { screen:({ navigation })=>(<MyChatsSreen data={item} navigation={navigation} design={design} />) },
Chat: { screen: ({ navigation })=>(<MyChatSreen data={item} navigation={navigation} design={design} />)},
Gift: { screen: ({ navigation }) => (<MyGiftSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} />) },
},
{
initialRouteName: 'Master', // <== Make sure to set this to the first screen you want on your application
// Other configs
}
)
LoadingScreen это должно выглядеть примерно так:
class LoadingScreen extends React.Component {
componentDidMount = async () => {
const userId = await AsyncStorage.getItem('userId')
this.props.navigation.navigate(userId ? 'Main' : 'Auth') // This will check if there is any item stored with userId, if true it will navigate to Main else to Auth
}
render() {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
}}>
<Text style={styles.textloadingStlye}>Loading Screen</Title>
</View>
)
}
}
Поток аутентификации с
AsyncStorage, когда вы впервые входите в систему или регистрируетесь, пользователь должен добавить это после успешной аутентификации и перед переходом к главному экрану, что-то вроде этого:
.... // Firebase login, then
await AsyncStorage.setItem('userId', id); // <== Here id is what you want to store of the user data for authentication, could be his db id or name or whatever you have
this.props.navigation.navigate('Loading');
Ваш
Signout, теперь, наконец, для выхода выполните:
logOutPress() {
firebase.auth().signOut(); // <== This will signout from firebase
AsyncStorage.clear(); // <== This will clear the userId from storage
this.props.navigation.navigate('Loading'); // <== We navigate to the loading screen we set earlier, which will check if there is a userId and navigate accordingly
}
Примечание: помните, что ваш основной стек теперь в этой настройке равен AppNavigator, поэтому убедитесь, чтоприведение export default createAppContainer(AppNavigator)
Надеюсь, это поможет!