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

在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;
  };
  ...
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。