Android开发之React Navigation 导航栏样式调整+底部角标消息提示

const AppStackNavigator = createStackNavigator({
 HomeScreen: {screen: HomeScreen},
 RainScreen: {screen: RainScreen}
},{
 defaultNavigationOptions:{
  ...
  headerTitleStyle: { 
   ...
   textAlign: "center", //用于android 机型标题居中显示
   flex:1
  }
 }
})

defaultNavigationOptions:{
  ...
  headerTitleStyle: {
   ...
   textAlign: "center", //用于android 机型标题居中显示
   flex:1,
  },
  headerRight: <View/>,
  headerLeft: <View/>
 }

defaultNavigationOptions:{
 headerStyle:{
  backgroundColor:"#fff",
  elevation:0.5
 },
 ...
}

const AppStackNavigator = createStackNavigator({
 HomeScreen: {screen: HomeScreen},
 ...
},{
 defaultNavigationOptions:{
  ...
 },
 transitionConfig: () => ({
  screenInterpolator: (sceneProps) => {
   return StackViewStyleInterpolator.forHorizontal(sceneProps)
  },
 }),
})

const rootTab = createBottomTabNavigator({
 ...
 info: {
  screen: InfoStack,
  navigationOptions: {
   tabBarLabel: "消息",
   tabBarIcon: ({focused, tintColor}) => {
    let icon = focused ?
     require('../resources/img/mine_icon_message_selected.png') :
     require('../resources/img/mine_icon_message_default.png');
    return <View>
     {
      msg > 0 ?
       <View style={{
        width:12,
        height:12,
        justifyContent:"center",
        position: 'absolute',
        zIndex: 9,
        backgroundColor: "#FB3768",
        borderRadius:6,
        right:0,
        top:-2,
       }}>
        <Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>{msg}</Text>
       </View> : null
     }
     <Image source={icon} style={{width: 34, height: 26}}/>
    </View>
   }
  }
 }
},{
 ...
 defaultNavigationOptions: ({navigation, screenProps}) => ({
  tabBarOnPress: (obj) => {
   //点击的时候清除消息
   const {routeName} = obj.navigation.state;
   if (routeName === "info") {
    msg = 0
   }
   obj.navigation.navigate(obj.navigation.state.key)
  }
 })
})