반응 네이티브 로그인 후 대시 보드를 첫 번째 화면으로 설정하는 방법

Question

내 첫 번째 화면이 시작 화면 인 반응 네이티브를 사용하고 있으며 사용자가 로그인 할 때 첫 화면에 대시 보드를 설정하려고합니다.

componentWillMount(){ 
    var self = this; 
    AsyncStorage.getItem(AppStrings.contracts.IS_LOGGED_IN).then((json) =>{ 
     try{ 
      var userDetail = JSON.parse(json); 
      if(userDetail.isLoggedIn != undefined && userDetail.isLoggedIn == true){ 
       Actions.dashboard(); 
      } 
     }catch(e){ 
     } 
    }) 
} 

내가 시작 화면에이 코드를 설정하고 IOS에서의 작업을 잘 :

여기 내 코드입니다. 하지만 안드로이드 문제는 사용자가 로그인 할 때 대시 보드 화면으로 이동하기 전에 5 ~ 10 초 동안 시작 화면이 표시된다는 것입니다.

여기 네비게이션 바에 react-native-router-flux를 사용하고 있습니다.

Answer 1

AsyncStorage.getItem()이 비동기이기 때문에 render() 함수가 호출되기 전에 호출되고 있습니다.

그래서 응용 프로그램의 흐름은 다음과 같습니다

1. 전화 componentWillMount()
2. AsyncStorage.getItem()
3. render() - 이렇게하면 5 ~ 10 초 동안 시작 화면을 볼 경우
4. AsyncStorage이 성취 된 것입니다 - .then() 그리고 사용자가 대시 보드로 리디렉션됩니다.

나는 당신의 상태에서 isLoaded 플래그를 설정합니다 : AsyncStorage이 약속을 이행되면

constructor() { 
    super(); 
    this.state = { 
    isLoaded: false, 
    } 
} 

를 그런 다음 componentWillMount() 기능의 내부 true에 값을 설정합니다.

try { 
    var userDetail = JSON.parse(json); 
    if(userDetail.isLoggedIn != undefined && userDetail.isLoggedIn == true){ 
    Actions.dashboard(); 
    } 
    this.setState({ isLoaded: true }); 
} 

그리고 마지막으로, 나는 응용 프로그램이 여전히 로직을 수행하는 사용자를 보여 render()의 내부 로딩 표시의 일종을 추가합니다.

render() { if(this.state.isLoading) { return <Text>I am loading</Text> } else { return ... } }