Dynamically changing drawer navigation layout react native

心不动则不痛 提交于 2019-12-24 21:10:00

问题


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!

来源:https://stackoverflow.com/questions/53748366/dynamically-changing-drawer-navigation-layout-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!