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 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
jQuery常用数据处理方法小结
2015/02/20 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python中threading超线程用法实例分析
2015/05/16 Python
python实现三次样条插值
2018/12/17 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
详解Python 解压缩文件
2019/04/09 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python版中国省市经纬度
2020/02/11 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
医学生求职自荐信
2013/10/25 职场文书
新员工入职感言
2014/02/01 职场文书
团日活动总结书格式
2014/05/08 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
公司备用金管理制度
2015/08/04 职场文书