【问题标题】:How to set initial tab in react navigation TabNavigator dynamically如何在反应导航 TabNavigator 中动态设置初始选项卡
【发布时间】:2018-04-21 05:56:32
【问题描述】:

我正在使用react-navigation,并且在StackNavigator 中有一个嵌套的TabNavigator。我在TabNavigator 中有三个选项卡,需要根据一些逻辑为TabNavigator 动态设置initialRouteName

我尝试将TabNavigator 放在React 组件中,并动态选择初始选项卡,并在StackNavigator 中使用,并通过TabNavigatorscreenProps 传递道具。但是这样我就无法导航到StackNavigator 的任何路线。

有什么方法可以动态生成initialRouteName

注意:我没有在这个应用程序中使用 redux。

【问题讨论】:

标签: reactjs react-native react-native-android react-navigation react-native-ios


【解决方案1】:
<Tab.Navigator
 initialRouteName="YOUR_TAB_NAME"
 ... 
/>

...

参考:https://reactnavigation.org/docs/bottom-tab-navigator/#initialroutename

【讨论】:

    【解决方案2】:

    看来你们真的很亲近。
    您可以设置导航状态的索引来指定要显示的初始路线。

    <SomeTabNavigator
      navigation={{
        ...this.props.navigation,
        state: {
          ...this.props.navigation.state,
          index: 1 // or whichever you want
        }
      }}
      screenProps={{
        // whatever the props you wanna pass to child screens.
      }}
    />
    
    

    但是您还必须通过静态路由通过,否则您无法导航。 (或者如果您已经有导航,请尝试使用 navigate 而不是 push。)

    class Screen extends React.Component{
    
      static router = SomeTabNavigator.router
    
    ...
    

    如果不是这种情况,那么您应该检查您的导航器的结构是否正确嵌套了堆栈导航器和选项卡导航器。

    也许为时已晚,但我希望它会对某人有所帮助。

    查看下面的链接了解更多详情。

    https://reactnavigation.org/docs/en/custom-navigators.html

    【讨论】:

      猜你喜欢
      • 2018-07-12
      • 1970-01-01
      • 1970-01-01
      • 2018-01-20
      • 2021-01-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多