가 기본 반작용 -. 어떻게 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)가 표시되고 "ActivityIndicator"가 표시됩니다. 하지만 로그인 패널이 아닙니다.

내 질문은 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} 
    />; 
    }