Не удалось перенаправить после входа в React Native

Question

есть. Я строю реагировать нативные приложения с crna / expo. Всего будет четыре экрана, один из которых защищенный. Я хотел бы перенаправить экран на экран входа в систему, если пользователь еще не вошел в систему. В настоящее время мой код работает нормально, и зарегистрированный пользователь может успешно войти в систему, но он не перенаправил на защищенный экран.

Это мой фрагмент кода из App.js

const AppTabNavigator = createBottomTabNavigator( {
  HomeScreen: {
    screen: HomeScreen,
  },
  ProfileScreen: {
    screen: Profile_auth, //this is the protected screen
  },
  AboutScreen: {
    screen: AboutScreen,
}, {
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: "bottom",
  backgroundColor: '#5eac1a',
});

Это мой фрагмент кода из Profile_auth, чтобы проверить, вошел ли пользователь в систему или нет.

export default createSwitchNavigator({
    ProfileScreen: {
        screen: ProfileScreen,
    },
    Login:{
        screen: Login,
    },
    AuthLoading:{
        screen: AuthLoading,
    },

},
    {
        initialRouteName: 'AuthLoading',
    }
);

Это мой фрагмент кода от AuthLoading.js

export default class AuthLoading extends React.Component{
    constructor(){
        super();
        this._checkToken();
    }
    _checkToken = async () =>{
        const token = await AsyncStorage.multiGet(['token', 'user_id']);
        this.props.navigation.navigate(token? 'ProfileScreen' : 'Login')
    };
    render(){
        return(
            <View>
                <ActivityIndicator/>
                <StatusBar barStyle="default"/>
            </View>
            );
    }
}

Если пользователь еще не вошел в систему, он будет перенаправлен на экран входа в систему. И это проблема. Я не могу перенаправить на Profilescreen после успешного входа в систему. Это мой фрагмент кода в Login.js

async _userLogin(navigate) {
    const {username} = this.state;
    const {pass} = this.state;
    let login = {
                'login': username,
                'password': pass,
            };
        fetch(url, {
            credentials: 'include',
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(login),
        })
        .then((response)=>response.json())
            .then((responseJson)=> {
                console.warn(responseJson);
            if(responseJson.status){
                this.showAlert();
                AsyncStorage.multiSet([
                        [token, token_value],
                        [user_id, user_id_value]
                    ]);
                this.props.navigation.dispatch(ProfileScreen); //THIS IS THE PROBLEM
            }
            else {
                Alert.alert('Login Failed', 'Invalid username or password');
            }
        }).catch(function(error) {
           console.log(error);
           return error;
       });
    }

Кто-нибудь может решить эту проблему? Пожалуйста, помогите ... Спасибо.

Answer 1

Я думаю, что вы делаете это трудным путем. Можете ли вы сделать это, как в этом примере?

В методе рендеринга App.js сделайте что-то вроде этого:

<View style={styles.container}>
  {this.state.user ? <LoggedIn /> : <LoggedOut />}
</View>

И ваша функция входа в систему при успешном завершении отправляет действие, которое переводит пользователя в состояние избыточности.