这次给大家带来react navigation使用案例解析，react navigation使用的注意事项有哪些，下面就是实战案例，一起来看一下。
一、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;
};
...
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue实现2048小游戏
如何操作vue内使用vee-validate
以上就是react navigation使用案例解析的详细内容。