react-native - StackNavigator 中 createMaterialTopTabNavigator 中的自定义 HeaderTitle

Question

我使用 React-Navigation 设置了以下路由器:

const MainView = createDrawerNavigator(
  {
    DrawerMain: {
      screen: StackNavScreens,
    },
  },
  {
    drawerPosition: 'left',
    contentComponent: Settings,
  },
);

const StackNavScreens = createStackNavigator(
  {
    Main: {
      screen: TabNav,
    },
    Screen1: {
      screen: Screen1,
      navigationOptions: {
        headerTitle: 'Screen1 Title',
      },
    },
    Screen2: {
      screen: Screen2,
    },
    },
    {
    navigationOptions: () => ({
      headerTitle: <Image source="Logo" />,
})
}}

const TabNav = createMaterialTopTabNavigator(
  {
    Tab1: {
      screen: Tab1Screen,
    },
    Tab2: {
      screen: Tab2Screen,
    },
    Tab3: {
      screen: Tab3Screen,
    },
  },{});

我已经在堆栈导航器中设置了 headerTitle，以便它以下列方式工作:如果用户在 Screen1 ，导航标题将显示为 Screen1 Title .如果他去 Screen2 ，他将看到 Logo ( <Image source="Logo"/> )。但是，我很难截取 Tab1 的标题。 , Tab2和 Tab3 .我试过通过 headerTitle在 navigationOptions对于每个选项卡 - 但它没有任何效果。现在，所有选项卡都显示默认 headerTitle来自 StackNavigator - 标志。

关于如何在所描述的场景中为选项卡设置标题标题的任何建议？

Answer 1

我创建了一个 createStackNavigator 包装了 createMaterialTopTabar，并为此 createStackNavigator 配置了头文件。它运作良好。

const WatchTopTabNavigator = createMaterialTopTabNavigator({
  VideoScreen: {
    screen: VideoStack,
    navigationOptions: {
      tabBarLabel: 'Video',
      tabBarIcon: ({
        tintColor
      }) => ( <
        Image source = {
          require('../assets/images/video.png')
        } //eslint-disable-line
        style = {
          {
            tintColor,
            width: 24,
            height: 24
          }
        }
        />
      )
    }
  },
  PhotoScreen: {
    screen: Photo,
    navigationOptions: {
      tabBarLabel: 'Ảnh',
      tabBarIcon: ({
        tintColor
      }) => ( <
        Image source = {
          require('../assets/images/video.png')
        } //eslint-disable-line
        style = {
          {
            tintColor,
            width: 24,
            height: 24
          }
        }
        />
      )
    }
  },
}, {
  tabBarOptions: {
    tabStyle: {
      backgroundColor: 'white',
    },
    style: {

    },
    labelStyle: {
      fontWeight: 'bold',
      color: 'red'
    }
  }
});

const WatchRoute = createStackNavigator({
  watchTopTabNavigator: WatchTopTabNavigator
}, {
  navigationOptions: {
    headerTitle: < Header / >
  }
});