這次帶給大家使用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;
};
...
}我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是使用React Navigation注意事項有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
