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