這次帶給大家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 可以自訂按鈕或Viewstatic navigationOptions = {
...
headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
<Text style={styles.NavSureButton}>btn</Text>
</TouchableOpacity>)
}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;
};
...
}以上是React Navigation實戰中有哪些注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！
