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

一、Navigation Bar

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

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

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

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

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

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

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

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

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

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

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

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

4.帶背景圖的Navgation Bar

與源生不同。react navigation bar中并沒(méi)有背景圖這一屬性。也就是說(shuō)我們要使用帶背景圖的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: {   //背景顏色必須為透明，不然無(wú)法透出底部圖片   backgroundColor: "transparent",   //安卓中不添加此屬性會(huì)導(dǎo)致背景圖無(wú)法鋪滿   elevation: 0, },  header: props => {    return <ImageHeader {...props} />;  }, }

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

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

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