檢查呈現之前的狀態以作出反應原生

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