react-native - 在渲染之前检查状态以响应 native

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()
 }