как установить initialRouteName динамически в реагирующем

Question

как дать Dynami c начальное название маршрута в реагировать-навигации? если устройство существует, мы должны перенаправить его на другой маршрут, иначе нам нужно выбрать другой маршрут пользователя.

Примечание. вкладка навигатор.

(не поток аутентификации)

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
... imports
function getInitialScreen() {
  AsyncStorage.getItem('unit')
    .then(unit => {
      return unit ? 'Home' : 'secondTab';
    })
    .catch(err => {

    });
}

const TabNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
       screen: HomeScreen,
       navigationOptions: {
        .....navigation options
       },
     },
    secondTab: {
      screen: secondTab,
    },
  },
  {
    initialRouteName: getInitialScreen(),
  },
); 
export default createAppContainer(TabNavigator);

Answer 1

Ok. Итак, на вашей странице навигации создайте состояние и измените его значение соответственно AsyncStorage, например

render() {
  const status = get AsyncStorage.getItem('unit');
  if(status != null)
  { setState({ name : 'Home'}) }
  else
  { setState({ name : 'anotherTab'}) }
} 

, затем передайте это состояние tabNavigation

initialRouteName: this.state.name,

, и это состояние, функции setState классифицируются на основе, так что вы должны использовать useState вместо исходного состояния на вашей странице

Answer 2

См. В соответствии с документами, initialRoute имя не должно быть async func.

Так что в идеале, в любом случае, вам нужно иметь заставку для своего приложения, где вы отображаете go и название приложения. Сделайте эту страницу initialRoute и в ее componentDidMount проверьте функцию asyn c и перейдите на нужную страницу.

Как и то, что я сделал:

createSwitchNavigator(
    {
      App: TabNavigator,
      Auth: AuthStack,
      SplashScreen: SplashScreen,
    },
    {
      initialRouteName: 'SplashScreen',
    },
  ),

А внутри SplashScreen я делаю:

componentDidMount(){
 if (token) {
      this.props.navigation.navigate('App');
    } else {
      this.props.navigation.navigate('Auth');
    }

}

Надеюсь, это ясно. Не стесняйтесь сомнений

Answer 3

Как вы можете видеть здесь :

Если вам нужно установить initialRouteName в качестве реквизита, это потому, что есть некоторые данные, которые вам нужно извлечь асинхронно, прежде чем вы сделаете навигация по приложению. Другой способ справиться с этим - использовать switchnavigator и иметь экран, который отображается при извлечении асинхронных данных c, а затем при необходимости перейти к соответствующему начальному маршруту с параметрами. см. документы для полного примера этого.

Взгляните на здесь .

Вы найдете больше описания!

Также Быстрое решение этой ситуации - проверить ваше состояние внутри SplashScreen componentDidMount () function

Пример SplashScreen:

componentDidMount(){
  AsyncStorage.getItem('unit')
    .then(unit => {
      if(unit){
       this.props.navigation.navigate('Home')
      }else{
       this.props.navigation.navigate('secondTab')
      }
    })
    .catch(err => {

    });
}

Answer 4

Вы можете проверить условие на главной странице или в Приложении. js

render() {
  const status = get AsyncStorage.getItem('unit');
  if(status != null)
  { return <Home/> }
  else
  { return <AnotherScreen/> }
}

Но мы можем переключаться между страницами, если мы используем stacknavigator или switchnavigator. мои знания. (Поправь меня, если я ошибаюсь).