Могу ли я зациклить componentWillMount, пока не получу user_key от API?

Question

Я пытаюсь использовать поток аутентификации реагирующей навигации для управления экраном входа, если пользователь вошел в систему или нет. Но теперь я застрял в AsyncStorage. Поэтому, пока пользователь не вошел в систему, я предполагаю, что componentWillMount будет ждать, пока пользователь введет учетные данные, коснется кнопки входа в систему, получит идентификатор user_id от вызова API и затем попытается снова. Для меня теперь это вызывает то, что в начале хорошо, но потом я должен выйти из приложения и вернуться, чтобы получить панель инструментов. Любое решение?

Это мой код из App.js, где я также создаю маршруты. Также я загружаю карту редукса внизу.

export const createRootNavigator = (signedIn = false) => {
  return SwitchNavigator(
    {
      SignedIn: {
        screen: SignedIn
      },
      SignedOut: {
        screen: SignedOut
      }
    },
    {
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false,
      checkedSignIn: false
    };
  }

  async componentWillMount() {
    await isSignedIn()
        .then(res => this.setState({ signedIn: res, checkedSignIn: true }))
        .catch(err => alert("An error occurred"));
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;

    // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
    if (!checkedSignIn) {
      return null;
    }

    const Layout = createRootNavigator(signedIn);
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          <Layout />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};

А вот Auth.js, где я жду user_key.

export let USER_KEY = 'myKey';

export const onSignIn = async () => { await AsyncStorage.setItem(USER_KEY, 'true') };
export const onSignOut = async () => { await AsyncStorage.removeItem(USER_KEY) };

export const isSignedIn = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(USER_KEY)
      .then(res => {
        if (res !== null) {
          // console.log('true')
          resolve(true);
        } else {
          resolve(false);
          // console.log('false')
        }
      })
      .catch(err => reject(err));
  });
};

Answer 1

Решением будет использование Splashscreen.Вы можете добавить заставку в приложение.Когда отображается Splashscreen, проверьте, существует ли пользователь в Asyncstorage, если он есть, перейдите на панель инструментов / домашний экран и, если asynstorage отвечает null, перейдите на страницу входа в систему.После завершения навигации вы можете скрыть заставку.Оформить заказ в npmjs для настройки Splashscreen react-native-splash-screen