javascript - React-native: ストレージからデータを取得する前にビューをレンダリングする

Question

ユーザーがログインしていない場合はサインイン コンポーネントをレンダリングしようとしています。ユーザーがログインしている場合は、ホームコンポーネントをレンダリングしようとしています。サインインコンポーネントで Storage 'isLIn'を' true'に設定サインアウト時に [ホームコンポーネントから] Storage 'isLIn'を' false'に設定し、React-Native アプリが開くたびに Storage をチェックし、State を Storage の値として設定します。

コードを見てください：

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { Scene, Router } from 'react-native-router-flux';
import Login from './login_component';
import Home from './home_component';

var KEY = 'isLIn';

export default class main extends Component {
  state = {
    isLoggedIn: false
  };

  componentWillMount() {
    this._loadInitialState().done();
  }

  _loadInitialState = async () => {
    try {
        let value = await AsyncStorage.getItem(KEY);
        if (value !== null && value === 'true') {
          this.setState({ isLoggedIn: true });
        } else {
          this.setState({ isLoggedIn: false });
        }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

  render() {
    const _isIn = (this.state.isLoggedIn===true) ? true : false;
    return (
        <Router>
          <Scene key="root" hideNavBar hideTabBar>
            <Scene key="Signin" component={Login} title="Signin" initial={!_isIn} />
            <Scene key="Home" component={Home} title="Home" initial={_isIn}/>
          </Scene>
        </Router>
    );
  }
}

理由はわかりませんが、ストレージが値を取得する前にレンダリングを最初に表示します。React_Docが言う ように、react-native render()のライフサイクルによると、 componentWillMount()の後にのみ実行され ます。

AsyncStorageを使用してストレージの設定と削除を行い、ルーティングにはReact-Native-Router-Fluxも使用しています。

私は解決策を試しました：

• アップデートさせる
• ソリューション1