Заголовок пуст после того, как реагирует навигация обновлена ​​до v2

Question

После обновления пакета реагировать на навигацию в моем проекте реагировать с 1.5.8 до 2.0.1 мой заголовок стал пустым на всех вкладках TabNavigator.На других экранах он работает как раньше.

Пример вкладки Панель инструментов :

class Dashboard extends PureComponent {
    static navigationOptions = ({ navigation }) => {
        return {
            title: strings.dashboard_header_title,
            headerLeft: renderMenu(navigation)
        };
    };

    ...
}

export default connect((state, ownProps) => {
    ...
})(Dashboard);

const renderMenu = navigation => {
    return <ImageButton
        style={styles.padding}
        imageStyle={styles.tintWhite}
        image={require('../../../res/images/menu.png')}
        onPress={navigation.state.params && navigation.state.params.toggleSideMenu}/>
}

Работает со старой версией реагирования-навигации.Я использую react-redux и навигатор вкладок внутри стекового навигатора.

TabNavigator:

const routeConfig = {
    Dashboard: {
        screen: Dashboard,
        resource: 'dashboard',
        navigationOptions: { tabBarIcon: ({tintColor}) => <Image style={{tintColor}} source={require('../../../res/images/tab-dashboard.png')}/> }
    },
    ...
};

const drawConfig = {
    lazy: false,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarPosition: 'bottom',
    tabBarOptions: {
        upperCaseLabel: false,
        activeBackgroundColor: 'white',
        activeTintColor: colors.main,
        inactiveTintColor: colors.normal,
        showIcon: true,
        style: {
            height: 48,
            backgroundColor: 'white',
            borderTopColor: colors.border,
            borderTopWidth: values.borderWidth,
            elevation: 0
        },
        labelStyle: {
            fontSize: 11,
            marginBottom: 0
        },
        tabStyle: {
            padding: 3,
            paddingTop: Platform.OS === 'android' ? 4 : 3
        },
        indicatorStyle: {
            height: 0,
            width: 0
        }
    }
}

const InnerTabNavigator = createBottomTabNavigator(routeConfig, drawConfig);

class TabBarNavigator extends PureComponent
{
    ...
    render() {
        return (
            <InnerTabNavigator
                {...this.props.ownProps}
                navigation={{
                    ...this.props.navigation,
                    state: this.state
                }}
            />
        );
    }
    ...
}

TabBarNavigator.router = InnerTabNavigator.router;

MainNavigator:

const MainNavigatorInner = createStackNavigator({
    ...
    TabBarNavigator: { screen: TabBarNavigator },
    ...
}, {
    initialRouteName: 'SignIn',
    headerMode: 'screen',
    navigationOptions: ({ navigation }) => {
        return {
            headerTintColor: 'white',
            headerTitleStyle: styles.headerTitle,
            headerStyle: {
                backgroundColor: colors.main,
                shadowColor: 'transparent',
                elevation: 0,
                borderBottomWidth: values.borderWidth,
                borderBottomColor: colors.borderHeader,
                height: values.headerHeight
            },
        };
    },
    cardStyle: {
        backgroundColor: colors.background
    }
});

export default class MainNavigator extends PureComponent {
    ...
    render() {
        return (
            ...
            <MainNavigatorInner
                ref='navigation'
                screenProps={this.screenProps}
                onNavigationStateChange={this._onNavigationStateChange}/>
            ...
        );
    }
    ...
}

Answer 1

У меня была такая же проблема, мое решение добавлено, мой stacknavigator headerMode: свойство 'auto', я использую шаблон экспо и добавлен файл RootNavigation headerMode: тоже 'auto', у меня это работает,

Roote navigationкак это =>

const RootStackNavigator = createStackNavigator(
  {
    Main: {
      screen: MainTabNavigator,
    },
  },
  {
    navigationOptions: () => ({
      headerTitleStyle: {
        fontWeight: 'normal',
      },
    }),
 headerMode: 'auto'
  }
);

Answer 2

У меня была такая же проблема вчера, когда я тоже обновил свою реагирующую навигацию. Я знаю, что это не оптимально, но попробуйте добавить tabBarIcon в вашем drawconfig:

const drawConfig = {
    lazy: false,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarPosition: 'bottom',
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let icon;

        if (routeName === "SomeRouteName") {
          icon = require("src/assets/someFile");
       } else if (routeName === "Some other route name") {
              if (focused) {
                icon = require("src/assets/someFile.png");
              } else {
               icon = require("src/assets/someFile.png");
              }
        }

        return <Image source={icon} style={{ width: 30, height: 30 }} />;
      }
    }),
    tabBarOptions: {
        upperCaseLabel: false,
        activeBackgroundColor: 'white',
        activeTintColor: colors.main,
        inactiveTintColor: colors.normal,
        showIcon: true,
        style: {
            height: 48,
            backgroundColor: 'white',
            borderTopColor: colors.border,
            borderTopWidth: values.borderWidth,
            elevation: 0
        },
        labelStyle: {
            fontSize: 11,
            marginBottom: 0
        },
        tabStyle: {
            padding: 3,
            paddingTop: Platform.OS === 'android' ? 4 : 3
        },
        indicatorStyle: {
            height: 0,
            width: 0
        }
    }
}