如何在 react-native 中动态设置 initialRouteName答案

【问题标题】：how to set initialRouteName dynamically in the react-native如何在 react-native 中动态设置 initialRouteName
【发布时间】：2020-02-18 08:15:16
【问题描述】：

如何在反应导航中给出动态初始路由名称？如果该单元存在，我们必须重定向到另一条路线，否则我们必须为用户提供另一条路线。

注意：我正在创建一个底部选项卡导航器，我必须在其中设置到该特定底部选项卡导航器的初始路由。

（不是身份验证流程）

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);

【问题讨论】：

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

请参阅文档，initialRoute 名称不应为 async func。

因此，理想情况下，您应该做的是，无论如何，您的应用都需要一个启动画面，您可以在其中显示应用的徽标和名称。将该页面设为 initialRoute 并在其 componentDidMount 中检查异步函数并导航到所需页面。

就像我做过的一样：

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

在 SplashScreen 里面我在做：

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

}

希望它清楚。如有疑问，请随意

【讨论】：

我正在创建一个底部选项卡导航器，我必须在其中设置初始路线，而不是 SwitchNavigator。

【解决方案2】：

如你所见here:

如果您需要将 initialRouteName 设置为道具，那是因为是在渲染之前需要异步获取的一些数据应用导航。另一种处理方法是使用 switchnavigator 并在获取时显示一个屏幕异步数据，然后导航到适当的初始路由必要时参数。有关完整示例，请参阅文档。

看看here。

你会发现更多的描述！

这种情况的快速解决方法是在 SplashScreen componentDidMount() 函数中检查您的状况

SplashScreen 示例：

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

    });
}

【讨论】：

我正在创建一个底部选项卡导航器，我必须在其中设置初始路线。

【解决方案3】：

官方文档为您提供了这个示例，几乎可以实现您想要的：

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

【讨论】：

【解决方案4】：

您可以在主页或App.js上查看条件

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

但是如果我们使用 stacknavigator 或 switchnavigator 的话，我们可以在页面之间切换.. 根据我的知识，我们不能直接进入特定的标签。（如果我错了，请纠正我）。

【讨论】：

对不起，我没听懂你。应用渲染后（不在根级别）创建底部标签导航。

【解决方案5】：

好的，所以在您的导航页面中创建状态并相应地更改其值 AsyncStorage like

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

然后将该状态传递给 tabNavigation

initialRouteName: this.state.name,

这个状态，setState 函数是基于分类的，所以你必须使用 useState 来代替你页面上的初始状态

【讨论】：