在反应导航更新到v2后,标题为空

时间:2018-05-10 14:57:23

标签: react-native react-navigation

将我的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和tab导航器。

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

0 个答案:

没有答案