带有 TabNavigation 反应导航的标题 [英] Header with TabNavigation React Navigation

问题描述

使用带有 React Native 的标签导航器的页面标题标题的最佳方法是什么?我知道有一种方法可以将 TabNavigator 包装在 StackNavigator 中，但我不明白如何使用不同类中的不同组件来执行此操作...

What is the best way to have a header with the page title with a tab navigator with react native? I know there is a way to wrap you TabNavigator inside of StackNavigator, but I do not understand how to do this with different components in different classes...

这是我正在做的设置 TabNavigator:

This is what I am doing to set up the TabNavigator:

App.js 内部:

export default createBottomTabNavigator(
{
  Activity: Activity,
  Front: Front
},
{
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      if (routeName === 'Activity') {
        iconName = `ios-information-circle${focused ? '' : '-outline'}`;
      } else if (routeName === 'Front') {
        iconName = `ios-cog`;
      }
      return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
  },
}),
tabBarOptions: {
  activeTintColor: 'tomato',
  inactiveTintColor: 'gray',
},
});

推荐答案

每个tab都可以是一个StackNavigator，例如:

Each tab can be a StackNavigator, for example:

const activityStackNavigator = createStackNavigator({
  Activity: {
    screen: Activity,
    navigationOption: {
      headerTitle: 'Some title...'
    }
  }
})

然后在您的 TabNavigator 中使用您刚刚创建的 StackNavigator 作为屏幕:

And then in your TabNavigator just use the StackNavigator you just created as a screen:

export default createBottomTabNavigator(
  {
    Activity: activityStackNavigator,
    Front: Front
  },
  ...
}

这里有一些 阅读 来自 React-Navigation 文档.

Here's some read from the React-Navigation docs.

这篇关于带有 TabNavigation 反应导航的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！