检查呈现之前的状态以作出反应原生

Question

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

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

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

Answer 1

渲染装载机和检查AsyncStorage直到数据被加载，然后navitage或有条件地呈现您的组件，如下所示：

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

Basicaly，你想要做类似的东西...

渲染“加载“屏幕，同时加载数据。完成后，重新申请主应用程序。

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} /> 
    } 
}