Question

我有一个动态创建的嵌套tabnavigator（数据被提取并存储在redux存储中）。但是从我的主屏幕，我有一个水平的平面列表，代表标签的快捷方式。例如：单击第二个项目应该将我带到第二个选项卡（我有1到5个选项卡，这取决于获取的用户数据）问题是我总是被重定向到第一个标签。

这是我的应用程序的结构以及我尝试做的事情

我的应用程序主导航器是一个tabnavigator :(如果用户已经登录，他将被直接重定向到主屏幕）。

 welcome: {screen: WelcomeScreen},
 login: {screen: LoginScreen}
 main: { screen: AppDrawerNavigator}

我的主屏幕（AppDrawerNavigator）是一个具有以下结构的DrawerNavigator：

const AppDrawerNavigator = DrawerNavigator({
   home: {
     screen: HomeNavigatorScreen, // HomeNavigatorScreen has the flatlist which  
                                  // links to the dynamictabs screen
   },
   dynamictabs: {
     screen: DynamictabsNavigator
   })

这是我在单击平面列表项时用于导航的代码：

 this.props.navigation.dispatch(NavigationActions.navigate({
          routeName: 'dynamictabs',
          action: NavigationActions.navigate({ routeName:`Tab${this.props.index}`})
        }));

DynamicTabsNavigator.js

class TabNavigator extends React.Component {   

  render() {
    const  MarksTabs = StackNavigator({
      marksStack: {
        screen:  MarkTabs(this.props.marks), // MarkTabs is a function 
      }
    });

    return <MarksTabs />
  }
 }

 const mapStateToProps = state => ({
  marks: state.userInfo.marks,
})
export const  DynamicTabsNavigator =connect(mapStateToProps)(TabNavigator)

// markTabs function

const MarkTabs = (marks) => TabNavigator(generatetabs(marks),configurationObject)

// generateTabs函数循环标记数组并生成标签//动态

generatetabs = (marks) => {
  lat tabs ={};
  marks[0].Cursuses.forEach((item, index, array) => {
    tabs[`Tab${index}`] = {
      screen:props => <NotesScreen {...props} data={item.Materials}/>,
      navigationOptions: ({navigation}) => ({
        title: item.Name,
      })
     }
  });
  return tabs
}

我试图做的是以静态方式分配路由器，并在运行时动态构建。并在返回时添加导航道具（我已将反应导航链接到redux商店。在这种情况下导航工作正常，如果我点击第三项我直接重定向到第三个堆栈。但是这个解决方案假设我将总是有5个选项卡，但并非总是如此）

这是我做的修改的代码：

class TabNavigator extends React.Component {   

  static router = StackRouter({
    marksStack0: {
      screen: TabNavigator({
        'Tab0': {
          screen: () => <NotesScreen/>
        },
        'Tab1':{
          screen: () => <NotesScreen/>
        },
        'Tab2':{
          screen: () => <NotesScreen/>
        },
        'Tab3':{
          screen: () => <NotesScreen/>
        },
        'Tab4': {
          screen: () => <NotesScreen/>
        }
      })
    }
  })

  render() {
    const  MarksTabs = StackNavigator({
      marksStack: {
        screen:  MarkTabs(this.props.marks), // MarkTabs is a function 
      }
    });

    return <MarksTabs navigation= {this.props.navigation} />
  }
 }

 const mapStateToProps = state => ({
  marks: state.userInfo.marks,
})
export const  DynamicTabsNavigator =connect(mapStateToProps)(TabNavigator)

问题是在静态声明中我们无法访问任何实例属性或redux状态，以便根据我拥有的项目有条件地呈现选项卡。我试图导入redux store：store.getState（），但它返回undefined。

我希望我的描述清楚。

任何有关我如何实现这一目标的帮助？

Answer 1

react-navigation的TabNavigator有一个名为initialRouteName的配置选项。将routeName调整为动态的，我假设您可以直接转到第二个或第三个或任何选项卡，而无需先进入第一个选项卡。

https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

React navigation dynamic tabnavigator：无法导航到特定标签

1 个答案: