React Navigation使用案例解析

這次帶給大家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;
  };
  ...
}

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用vue實作2048小遊戲

如何操作Vue內使用vee-validate

以上是React Navigation使用案例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！