1

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

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

（不是身份验证流程）

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

5 回答 5

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

}

希望它清楚。随意质疑

于 2020-02-18T08:58:25.970 回答
1

正如你在这里看到的：

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

看看这里。

你会发现更多的描述！

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

SplashScreen 示例：

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

    });
}
于 2020-02-18T09:16:26.200 回答
0

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

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} />
  </>
)
于 2021-07-14T02:19:15.967 回答
-1

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

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

但是，如果我们使用 stacknavigator 或 switchnavigator，我们可以在页面之间切换。根据我的知识，我们不能直接转到特定的选项卡。（如果我错了，请纠正我）。

于 2020-02-18T08:33:00.177 回答
-2

好的，所以在您的导航页面中创建状态并相应地更改其值 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 来代替你页面上的初始状态

于 2020-02-18T12:46:39.433 回答