大家好，今天我将向大家分享有关Navigation Gestures和Fluid Navigation Gestures的一些独特见解，希望能够为你们带来新的思考和启示。
使用ReactNavigation注意事项有哪些
这次给大家带来使用React Navigation注意事项有哪些，使用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;
};
...
}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
vue组件发布到npm步骤分析
Vue多级组件provide/inject使用详解
stacknavigator怎么返回
按使用形式主要分三部分:
(1) StackNavigator:类似于普通的Navigator，实现不同的页面进行跳转
(2) TabNavigator:相当于里面的TabBarController，屏幕上方的标签栏，不同的tabs互相切换。
(3) DrawerNavigator:抽屉效果，侧边滑出
今天主要学习StackNavigator，另外两个随后跟上。
按照说明设置各种属性，结果是各种无效，查找资料也没有找到好的实例，好吧，还是回来看官方文档，哎，才发现navigationOptions变样了，可能是版本更新了或编辑器的问题的，在这里我用的编辑器是Sublime Text，反正是各种无效，我们来看官网的navigationOptions：
title:导航栏的标题
header:导航栏设置对象
headerTitle:导航栏的标题,可以是字符串也可以是个组件
headerBackTitle:左上角的返回键文字,默认是上一个页面的title，设置这个属性会覆盖掉title的值
headerRight:导航栏右按钮
headerLeft:导航栏左按钮
headerStyle:导航栏的style
headerTitleStyle:导航栏的title的style
headerTintColor:返回按钮的颜色
headerPressColorAndroid：按压返回按钮显示的颜色安卓系统>= 5.0才有效。
gesturesEnabled：是否允许右滑返回，在iOS上默认为true，在Android上默认为false