Question

有。我正在使用crna / expo构建React本机应用程序。将有四个屏幕，其中一个是受保护的屏幕。如果用户尚未登录，我想将屏幕重定向到“登录”屏幕。目前，我的代码运行正常，注册用户可以成功登录，但没有重定向到受保护的屏幕。

这是我来自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的render方法中，应执行以下操作：

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

成功登录时，您的登录功能将分派将用户设置为redux状态的操作。

在React Native中登录后无法重定向

1 个答案: