React Navigation 使用中遇到的问题小结


Posted in Javascript onMay 08, 2018

在React Native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和iOS中相对不协调的地方,特此记录

一、Navigation Bar

使用navigationbar的时候遇到如下的问题

1.navigation bar的底部有一条黑线

本意做一个bar的颜色和页面颜色一致的页面。只有顶部有两个其他按钮的时候。发现bar的底部有一条黑线。导致bar不能很好的匹配想要的页面效果。在header中设置一下代码中后可去除

static navigationOptions = {
 ...
 headerStyle: {
    ...
    borderBottomWidth: 0,
  },
 }

2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满

react navigation bar在安卓中默认会有一个高度。带来的视觉效果是底部会有一条阴影。而且造成另外一个比较头疼的效果是如果使用了带背景图的自定义Bar时。会发现背景图有覆盖不全的效果。两侧总有一些间隙。iOS中则不会出现此问题。将elevation属性置零后可解决这个问题

static navigationOptions = {
 ...
 headerStyle: {
    ...
    elevation: 0,
  },
 }

3.android 中Bar标题居中问题

在安卓中,bar 的标题是居左的。iOS则默认居中。可以通过以下写法居中

static navigationOptions = {
 ...
 headerTitleStyle: {
    //此属性是标题的Style属性。可以接受<Text>标签的style
    ...
    alignSelf: "center",
  },
 }

在左侧没有按键的时候。这样写就足够了。但是如果左侧有个返回键或者自定义的其他按键。在安卓中标题就会发生偏移。解决办法是右侧添加一个空按钮

static navigationOptions = {
 ...
 headerRight: <View />
 }

4.带背景图的Navgation Bar

与源生不同。react navigation bar中并没有背景图这一属性。也就是说我们要使用带背景图的navigation bar的时候必须要使用自定义的view。

import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
  <View>
    <Image
      style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
      source={require(...)}
    />
    <Header {...props} style={{backgroundColor: "transparent"}} />
  </View>
);

static navigationOptions = {
 ...
 headerStyle: {
   //背景颜色必须为透明,不然无法透出底部图片
   backgroundColor: "transparent",
   //安卓中不添加此属性会导致背景图无法铺满
   elevation: 0,
 },
  header: props => {
    return <ImageHeader {...props} />;
  },
 }

5.当StackNavigator与DrawerNavigator嵌套使用时手势冲突问题

当DrawerNavigator嵌套StackNavigator时。进入StackNav的二级界面后返回手势与打开DrawerNav打开菜单冲突。

static navigationOptions = {
 ...
 //禁止打开菜单
 drawerLockMode: "locked-closed", 
 //允许使用返回手势
 gesturesEnabled: true,
 }

此设置按照需求自行修改

5.Navgation Bar高度不一致问题

使用自定义的Bar时。安卓和iOS高度不一致。Android计算Nav高度是从手机顶部开始计算。而iOS默认会向下偏移状态栏的高度。要做到效果统一。需要将安卓的Bar的paddingTop属性设为状态栏高度

import {StatusBar, Platform} from "react-native";
navigationOptions = {
 ...
 headerStyle: {
   ...
   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
  },
 }

6.navigation Bar上使用自定义按钮

使用headerRight 或者 headerLeft 可以定制按钮或者View

static navigationOptions = {
 ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
 }

但是如果onPress方法要用到this.props、this.state或者是类中的其他方法的时候就会出现问题

在每个页面的类中,我们使用static navigationOptions={...}来配置navigation的一些配置。但是由于static 修饰的属性属于类的静态属性。无法调用this的属性方法。所以我们需要使用this.props.navigation.setParams({key:value ...})方法来设置header按钮的点击事件。

class Demo extends React,Component{
 componentWillMount() {
  //绑定方法
  this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});
 }
 //点击方法
 rightBtnOnPress = ()=>{
  ...
 }
  static navigationOptions = ({navigation}) => {
    const params = navigation.state.params || {};
    let navigationOptions = {
    ...
    headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
    }
    return navigationOptions;
  };
  ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 #Javascript
You might like
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python实现的knn算法示例
2018/06/14 Python
Python如何实现动态数组
2019/11/02 Python
Python API len函数操作过程解析
2020/03/05 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
社团活动策划书范文
2014/01/09 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
酒店前台辞职书
2015/02/26 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
员工加薪申请报告
2015/05/15 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android