はネイティブリアクト - 。私は、ユーザーがアプリケーションの起動時にログインしているかどうかを検出し、ログインしていない場合は、ログイン画面に彼をリダイレクトしようとしていますどのようにcomponentWillReceiveProps

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（）関数を変更してフルスクリーンのログインビューを表示する方法です。

Answer 1

render（）関数内のすべてのビューを表示する必要があります。複雑なアプリケーションを開発する場合は、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}/> 

...

Answer 2

私は同様のコードを持っています。以下のコードの小道具はReduxから来ています。したがって、私は州の代わりに小道具を直接使用しています。

render() { 
    return this.props.account.loggedIn ? 
    <Main 
    /> : 
    <Login 
     onLogin={this.props.onLogin} 
    />; 
    }