react-navigation 更新到 v2 后，标题为空答案

【问题标题】：Header is empty after react-navigation updated to v2react-navigation 更新到 v2 后，标题为空
【发布时间】：2018-10-20 21:34:23
【问题描述】：

将我的 react-native 项目的 react-navigation 包从 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-navigation。我在堆栈导航器中使用react-redux 和标签导航器。

标签导航器：

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;

主导航器：

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}/>
            ...
        );
    }
    ...
}

【问题讨论】：

您能否添加一个代码示例来说明您如何定义导航器？
@needsleep 添加。

标签： react-native react-navigation

【解决方案1】：

昨天我更新我的 react-navigation 时也遇到了同样的问题。我知道这不是最佳选择，但请尝试在您的 drawconfig 中添加 tabBarIcon：

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
        }
    }
}

【讨论】：

这没有帮助。

【解决方案2】：

我也有同样的问题，我的解决方案已添加到我的 stacknavigator headerMode: 'auto' 属性，我使用 expo 模板并添加了 RootNavigation 文件 headerMode: 'auto' 也适用于我，

这样的导航 =>

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

【讨论】：