在渲染之前检查状态以反应原生

Question

我需要在第一次运行应用程序时获取用户名.然后,我想跳过第一个屏幕,直接进入第二个屏幕.

我正在AsyncStorage.getItem("first")第一个屏幕中使用,检查这是否是第一次启动.如果没有,navigate('SecondScreen').

问题是第一个屏幕在进入第二个屏幕之前闪烁了半秒钟.有没有办法来解决这个问题？

Answer 1

渲染一个加载器并检查AsyncStorage,直到加载数据,然后像这样有条件地导航或渲染组件:

constructor(){
   super()
   this.state = {
      hasName: null, loaded: false,
   }
}

componentDidMount(){
   this.fetchName()
}

fetchName(){
   AsyncStorage.getItem('first')
   .then((e, s)=>{
         this.setState({hasName: s ? true : false, loaded: true})
   });
}

loading(){
    return(<View><Text>Loading...</Text></View>)
}

renderLoaded(){
   if (this.state.hasName){
      return(...)
   }  else {
      navigate('secondScreen')
      return(...)
   }
}

render(){
   if (this.state.loaded){
        return this.renderLoaded()
   }
  return this.loading()
 }