React-Navigation在tabNavigation上显示动态标头

Question

我有这个代码：

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from './modules/Home/HomeScreen';
import DetailScreen from './modules/Home/DetailScreen';
import React from 'react';

const tabNav = createBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: { screen: DetailScreen },
    },
);
//
tabNav.navigationOptions = ({ navigation }) => {
    let { routeName } = navigation.state.routes[navigation.state.index];
    console.log('navigation: ', navigation.state);
    let title;
    if (routeName === 'Home') {
        title = 'Home';
    } else if (routeName === 'Details') {
        title = 'Detail';
    }
    return {
        title,
        headerMode: 'none',
    };
};
//

const RootNavigator = createStackNavigator(
    {
        Main: tabNav,
    },
    {
        navigationOptions: {
            headerMode: 'none',
            headerTransparent: true,
        },
    },
);

export default RootNavigator;

这是代码运行良好。

我的问题是，我想改变这一部分变得充满活力。我试图把stackNavigator放在标签内，但一直让我回复错误。

if (routeName === 'Home') {
    title = 'Home';
} else if (routeName === 'Details') {
    title = 'Detail';
}

有什么建议吗？

---

更新：

我试图将stackNavigator放入我的屏幕：

const tabNav = createBottomTabNavigator(
    {
        Home: createStackNavigator({
            screen: HomeScreen,
            navigationOptions: {
                title: 'Home 2',
            },
        }),

        Details: { screen: DetailScreen },
    },
);

它不断回报我The component for route 'navigationOptions' must be a React component.

Answer 1

StackNavigator配置错误，试试这个：

const tabNav = createBottomTabNavigator({
    Home: {
        screen: createStackNavigator({
            homeSreen: {
                screen: HomeScreen,
                navigationOptions: {
                    title: 'Home 2',
                },
            },{
                initialRouteName: 'homeScreen',
        })
    },
    Details: { screen: DetailScreen },
});

要么

const HomeStack = createStackNavigator({
    home: {
      screen: HomeScreen,
      navigationOptions: {
        title: 'Home 2',
      },
    },
  },{
      initialRouteName: 'home',
  });

 const tabNav = createBottomTabNavigator({
    Home: { screen: HomeStack },
    Details: { screen: DetailScreen },
 });

和

https://reactnavigation.org/docs/en/stack-navigator.html

你可以为每个屏幕设置标题：

const tabNav = createBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
            navigationOptions: {
                title: 'Home',
            },
        },
        Details: {
            screen: DetailScreen,
            navigationOptions: {
                title: 'Details',
            },
        },
    },
);

https://reactnavigation.org/docs/en/tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator