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

Answer 2

基本上，你想做类似的事情......

渲染＆＃34; loading＆＃34;加载数据时屏幕。完成后，使用主应用程序重新渲染。

class Application extends React.Component {
  state = {
    ready: false,
    user: null,
  }

  async componentWillMount() {
    const user = await AsyncStorage.getItem("user");
    this.setState({
      user,
      ready: true
    })
  }

  render() {
    if (this.state.ready === false) {
      // render "booting" screen while reading data from storate or remote server
      return <Boot />;
    }

    if (this.state.user === null) {
      // render Login screen
      return <Login />
    }

    // Render main navigation stack for app
    return <NavigatorStack user={this.state.user} />
  }
}

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

2 个答案: