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 />
 }

以上方法适用旧版本
新版本中居中问题得到了解决
创建StackNav时使用 headerLayoutPreset: "center",参数可以配置标题居中，注意不是在navigationOptions中使用而是在其外面一层

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

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与StatusBar的问题

默认情况下iOS的StatusBar不会有太大的问题，与源生一样高度为64，且状态栏会浮于状导航栏上方。
安卓则会有比较令人头疼的问题。安卓<StatusBar/>有一个独有的prop translucent，设置成true时，应用会延伸到状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分），但是安卓导航栏默认情况下高度是不包括状态栏的高度的。解决这个问题的方法是需要将安卓的Bar的paddingTop属性设为状态栏高度

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

这样就能和iOS的样式保持一致，目前没有测试过StatusBar的高度在刘海屏上返回的数值是否正确。

另一种解决方案是
将<StatusBar/>的 translucent设置为false，设置另一个属性backgroundColor设置为何导航栏一致的颜色。也能达到相同的目的。但是如果你的导航栏是自定义的，且背景颜色或者图片不是纯色。这个方案就解决不了啦。

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;
    };
    ...
}

7. Android使用Tabbar+TextInput控件时，键盘会将tabbar顶起

在android/app/app/src/main/AndroidManifest.xml中,设置以下参数
<activity android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize">

React Navigation 使用中遇到的问题