android - React Native - 如何从 componentWillReceiveProps 重定向到登录 View

Question

我正在尝试检测用户是否在应用程序启动期间登录，如果未登录，则将他重定向到登录屏幕。

import * as AuthView from '../modules/auth/AuthView';    
const AppView = React.createClass({
    propTypes: {
        isReady: PropTypes.bool.isRequired,
        isLoggedIn: PropTypes.bool.isRequired,
        dispatch: PropTypes.func.isRequired
    },
    componentDidMount() {
        snapshotUtil.resetSnapshot()
            .then(snapshot => {
                const {dispatch} = this.props;

                if (snapshot) {
                    dispatch(SessionStateActions.resetSessionStateFromSnapshot(snapshot));
                } else {
                    dispatch(SessionStateActions.initializeSessionState());
                }

                store.subscribe(() => {
                    snapshotUtil.saveSnapshot(store.getState());
                });
            });
    },

    componentWillReceiveProps({isReady, isLoggedIn}) {
        if (!this.props.isReady) {
            if (isReady && !isLoggedIn) {
                console.warn("Not logged in, trying to show login screen here...");
               AuthView.showLoginView();
            }
        }
    },

    render() {
        if (!this.props.isReady) {
            return (
                <View>
                    <ActivityIndicator style={styles.centered}/>
                </View>
            );
        }
        return (
            <View style={{flex: 1}}>
                <NavigationViewContainer />
            </View>
        );
    }
});

我的 AuthView 看起来像这样:

export function showLoginView() {
    var loginView = <View>
        <Text>
            This is a Login View
        </Text>
    </View>;

    return loginView;
}

输出为空白。看起来像这样:http://i.imgur.com/6CgvOGW.png

因此它显示警告消息 (console.warn) 并显示“ActivityIndi​​cator”。但不是登录面板。

我的问题是，如何修改 showLoginView() 函数以显示全屏登录 View ？

Answer 1

您必须在 render() 函数中显示所有 View 。如果您开发复杂的应用程序，请考虑使用 Navigator 组件。 在你的情况下:

 componentWillReceiveProps({isReady, isLoggedIn}) {
    if (!this.props.isReady) {
        if (isReady && !isLoggedIn) {
            console.warn("Not logged in, trying to show login screen here...");
           this.state.showLogin = true;
        }
    }
 },
 render() {
    if (this.state.showLogin) {
        return showLoginView()
    } 
    if (!this.props.isReady) {
        return (
            <View>
                <ActivityIndicator style={styles.centered}/>

...