React-Navigation отображает динамические заголовки на вкладке Navigation

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