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, }