Dynamically changing drawer navigation layout reac

2019-08-24 10:56发布

问题:

I'm currently developing a React Native app and I'm trying to implement a drawer navigation which, when the user is logged out shows a different layout and when the user logs in shows a different layout. I tried using state in the Drawer Navigation file to check if the user is logged in or not and then return appropriate drawer navigator but the navigation only updates when the app is launched. Is there a way to implement this?

Custom Drawer Navigator code: `export default class MainWrapper extends Component {

constructor(props) {
    super(props);

    this.state = {
        isLoading: true,
        isAuth: false
    };

    this.getUserData = this.getUserData.bind(this);
}

componentDidMount() {
    this.getUserData();
}


async getUserData() {
    AsyncStorage
        .getItem(ENV.ASYNC_STRG_VARS.USR_DTLS)
        .then((data) => {
            if(data === null) {
                this.setState({
                    isLoading: false,
                    isAuth: false
                });
                return;
            }
            if(data[0].user_session === "true") {
                this.setState({
                    isLoading: false,
                    isAuth: true
                });
                return;
            }
            this.setState({
                isLoading: false,
                isAuth: false
            });
        })
        .catch(() => {
            this.setState({
                isLoading: false,
                isAuth: false
            });
        });
}

render() {
    if(this.state.isLoading) {
        return(
            <View style={styles.contentContainer}>
                <Spinner />
            </View>
        )
    }
    if (this.state.isAuth) {
        return (
            <AuthenticatedDrawer />
        )
    }
    return (
        <UnauthenticatedDrawer />
    )
}

}

Thanks in advance!