美文网首页
react-navigation 导航栏使用记录

react-navigation 导航栏使用记录

作者: 黎峰麟 | 来源:发表于2018-06-04 17:07 被阅读182次

    一:安卓导航栏不居中
    (已在网上找到了新的解决方案,笔者并未测试,不过应该可用
    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 导航栏使用记录

          本文链接:https://www.haomeiwen.com/subject/lseysftx.html