反応ネイティブのレンダリング前の状態を確認してください

Question

初めてアプリケーションを実行するときにユーザーの名前を取得する必要があります。その後、最初の画面をスキップして、2番目の画面に直接移動します。

最初の画面でAsyncStorage.getItem("first")を使用して、これが最初の起動かどうかを確認しています。そうでなければ、navigate('SecondScreen')。

問題は、2番目の画面に行く前に、最初の画面が0.5秒間点滅することです。これを修正する方法はありますか？ 「

レンダリング...

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 1

ローダーをレンダリングしAsyncStorageをチェックし、データがロードされるまで、その後、navitageかそこらのような条件付きでコンポーネントをレンダリングデータの読み込み中は「読み込み中」の画面になります完了したら、メインアプリケーションで再レンダリングします。

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

Answer 2

Basicalyは、あなたが同様の何かをしたい：