React Navigation 使用中遇到的問題

在React Native的開發(fā)中，使用到react navigation框架時(shí)遇到了不少問題。主要是安卓和iOS中相對不協(xié)調(diào)的地方，特此記錄

一、Navigation Bar

使用navigationbar的時(shí)候遇到如下的問題

1.navigation bar的底部有一條黑線

本意做一個(gè)bar的顏色和頁面顏色一致的頁面。只有頂部有兩個(gè)其他按鈕的時(shí)候。發(fā)現(xiàn)bar的底部有一條黑線。導(dǎo)致bar不能很好的匹配想要的頁面效果。在header中設(shè)置一下代碼中后可去除

static navigationOptions = {
  ...
 headerStyle: {
        ...
        borderBottomWidth: 0,
    },
  }

2. android 的 Bar底部有一條陰影，自定義Bar背景圖無法填充滿

react navigation bar在安卓中默認(rèn)會有一個(gè)高度。帶來的視覺效果是底部會有一條陰影。而且造成另外一個(gè)比較頭疼的效果是如果使用了帶背景圖的自定義Bar時(shí)。會發(fā)現(xiàn)背景圖有覆蓋不全的效果。兩側(cè)總有一些間隙。iOS中則不會出現(xiàn)此問題。將elevation屬性置零后可解決這個(gè)問題

  static navigationOptions = {
  ...
  headerStyle: {
        ...
        elevation: 0,
    },
  }

3.android 中Bar標(biāo)題居中問題

在安卓中,bar 的標(biāo)題是居左的。iOS則默認(rèn)居中。可以通過以下寫法居中

static navigationOptions = {
  ...
  headerTitleStyle: {
        //此屬性是標(biāo)題的Style屬性。可以接受<Text>標(biāo)簽的style
        ...
        alignSelf: "center",
    },
  }

在左側(cè)沒有按鍵的時(shí)候。這樣寫就足夠了。但是如果左側(cè)有個(gè)返回鍵或者自定義的其他按鍵。在安卓中標(biāo)題就會發(fā)生偏移。解決辦法是右側(cè)添加一個(gè)空按鈕

static navigationOptions = {
  ...
  headerRight: <View />
 }

以上方法適用舊版本
新版本中居中問題得到了解決
創(chuàng)建StackNav時(shí)使用 headerLayoutPreset: "center",參數(shù)可以配置標(biāo)題居中，注意不是在navigationOptions中使用而是在其外面一層

const ContactsNavigator = createStackNavigator(
    { ContactsPage: { screen: ContactsPage } },
    {
        mode: "card",
        headerLayoutPreset: "center",
        navigationOptions: {
            ...
        }
    }
);

4.帶背景圖的Navgation Bar

與源生不同。react navigation bar中并沒有背景圖這一屬性。也就是說我們要使用帶背景圖的navigation bar的時(shí)候必須要使用自定義的view。

import {Header} from "react-navigation";
//header 需導(dǎo)入
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",
      //安卓中不添加此屬性會導(dǎo)致背景圖無法鋪滿
      elevation: 0,
  },
   header: props => {
        return <ImageHeader {...props} />;
    },
 }

5.當(dāng)StackNavigator與DrawerNavigator嵌套使用時(shí)手勢沖突問題

當(dāng)DrawerNavigator嵌套StackNavigator時(shí)。進(jìn)入StackNav的二級界面后返回手勢與打開DrawerNav打開菜單沖突。

static navigationOptions = {
  ...
  //禁止打開菜單
  drawerLockMode: "locked-closed", 
  //允許使用返回手勢
  gesturesEnabled: true,
 }

此設(shè)置按照需求自行修改

5.Navgation Bar與StatusBar的問題

默認(rèn)情況下iOS的StatusBar不會有太大的問題，與源生一樣高度為64，且狀態(tài)欄會浮于狀導(dǎo)航欄上方。
安卓則會有比較令人頭疼的問題。安卓<StatusBar/>有一個(gè)獨(dú)有的prop translucent，設(shè)置成true時(shí)，應(yīng)用會延伸到狀態(tài)欄之下繪制（即所謂“沉浸式”——被狀態(tài)欄遮住一部分），但是安卓導(dǎo)航欄默認(rèn)情況下高度是不包括狀態(tài)欄的高度的。解決這個(gè)問題的方法是需要將安卓的Bar的paddingTop屬性設(shè)為狀態(tài)欄高度

import {StatusBar, Platform} from "react-native";
navigationOptions = {
  ...
  headerStyle: {
      ...
      paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
    },
 }

這樣就能和iOS的樣式保持一致，目前沒有測試過StatusBar的高度在劉海屏上返回的數(shù)值是否正確。

另一種解決方案是
將<StatusBar/>的 translucent設(shè)置為false，設(shè)置另一個(gè)屬性backgroundColor設(shè)置為何導(dǎo)航欄一致的顏色。也能達(dá)到相同的目的。但是如果你的導(dǎo)航欄是自定義的，且背景顏色或者圖片不是純色。這個(gè)方案就解決不了啦。

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或者是類中的其他方法的時(shí)候就會出現(xiàn)問題
在每個(gè)頁面的類中，我們使用static navigationOptions={...}來配置navigation的一些配置。但是由于static 修飾的屬性屬于類的靜態(tài)屬性。無法調(diào)用this的屬性方法。所以我們需要使用this.props.navigation.setParams({key:value ...})方法來設(shè)置header按鈕的點(diǎn)擊事件。

class Demo extends React,Component{
  componentWillMount() {
    //綁定方法
    this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});
  }
  //點(diǎn)擊方法
  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;
    };
    ...
}

7. Android使用Tabbar+TextInput控件時(shí)，鍵盤會將tabbar頂起

在android/app/app/src/main/AndroidManifest.xml中,設(shè)置以下參數(shù)
<activity android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize">

`