react-navigation 导航栏使用记录

一:安卓导航栏不居中
(已在网上找到了新的解决方案,笔者并未测试,不过应该可用
https://www.cnblogs.com/alex-huanglintian/p/8641255.html

                                非常感谢分享者
static navigationOptions = { 
          headerTitleStyle:{
          flex: 1,
          textAlign: 'center',         
}

以下是我当时的处理方式:
1 .修改react-navigation/src/views/Header/Header.js

  title: {
    bottom: 0,
    top: 0,
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
    position: 'absolute',
    alignItems: 'center',
    flexDirection: 'row',
    // justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
    //   安卓标题不居中的问题
      justifyContent: Platform.OS === 'ios' ? 'center' : 'center',
  },

2 .处理相应的模板界面

    1>导航栏只有标题和有标题而且左右两边均有按钮时不需要做处理
    2>如果导航栏左右两边只有任意一个时就需要添加一个到另一边使他居中
        static navigationOptions = {
        title: '详情',
        //顶部导航栏背景颜色
        headerStyle:{backgroundColor:'white'},   
        //添加一个右边按钮  为了使标题居中
        headerRight: (
            <Text/>
        ),
    }

二:iOS导航栏返回键颜色和不显示返回文字

navigationOptions: {
      headerBackTitle: null,
      headerTintColor:'black'    //返回键和顶部标题的颜色
},

三:createBottomTabNavigator底部导航栏背景和文字

tabBarOptions: {
      activeTintColor: 'black',             // 文字和图片选中颜色
      inactiveTintColor: 'gray',            // 文字和图片未选中颜色
      activeBackgroundColor:'black',      //底部选项卡背景颜色
      inactiveBackgroundColor:'black',    //底部背景颜色
 },

四: 键盘把tabar顶起来了

1. 自定义tabar 体验很差tabar会在键盘顶部闪来闪去
2. 修改AndroidManifest.xml中配置为
    android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

react-navigation 导航栏使用记录

推荐阅读更多精彩内容