欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 23:02:30
在react native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和ios中相对不协调的地方,特此记录 一、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;
  };
  ...
}

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