React Navigation 使用中遇到的问题小结

在React Native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和iOS中相对不协调的地方,特此记录

一、Navigation Bar

使用navigationbar的时候遇到如下的问题

1.navigation bar的底部有一条黑线

本意做一个bar的颜色和页面颜色一致的页面。只有顶部有两个其他按钮的时候。发现bar的底部有一条黑线。导致bar不能很好的匹配想要的页面效果。在header中设置一下代码中后可去除

1

2

3

4

5

6

7

static navigationOptions = {

 ...

 headerStyle: {

    ...

    borderBottomWidth: 0,

  },

 }

2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满

react navigation bar在安卓中默认会有一个高度。带来的视觉效果是底部会有一条阴影。而且造成另外一个比较头疼的效果是如果使用了带背景图的自定义Bar时。会发现背景图有覆盖不全的效果。两侧总有一些间隙。iOS中则不会出现此问题。将elevation属性置零后可解决这个问题

1

2

3

4

5

6

7

static navigationOptions = {

...

headerStyle: {

   ...

   elevation: 0,

 },

}

3.android 中Bar标题居中问题

在安卓中,bar 的标题是居左的。iOS则默认居中。可以通过以下写法居中

1

2

3

4

5

6

7

8

static navigationOptions = {

 ...

 headerTitleStyle: {

    //此属性是标题的Style属性。可以接受<Text>标签的style

    ...

    alignSelf: "center",

  },

 }

在左侧没有按键的时候。这样写就足够了。但是如果左侧有个返回键或者自定义的其他按键。在安卓中标题就会发生偏移。解决办法是右侧添加一个空按钮

1

2

3

4

static navigationOptions = {

 ...

 headerRight: <View />

 }

4.带背景图的Navgation Bar

与源生不同。react navigation bar中并没有背景图这一属性。也就是说我们要使用带背景图的navigation bar的时候必须要使用自定义的view。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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打开菜单冲突。

1

2

3

4

5

6

7

static navigationOptions = {

 ...

 //禁止打开菜单

 drawerLockMode: "locked-closed",

 //允许使用返回手势

 gesturesEnabled: true,

 }

此设置按照需求自行修改

5.Navgation Bar高度不一致问题

使用自定义的Bar时。安卓和iOS高度不一致。Android计算Nav高度是从手机顶部开始计算。而iOS默认会向下偏移状态栏的高度。要做到效果统一。需要将安卓的Bar的paddingTop属性设为状态栏高度

1

2

3

4

5

6

7

8

import {StatusBar, Platform} from "react-native";

navigationOptions = {

 ...

 headerStyle: {

   ...

   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,

  },

 }

6.navigation Bar上使用自定义按钮

使用headerRight 或者 headerLeft 可以定制按钮或者View

1

2

3

4

5

6

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按钮的点击事件。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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;

  };

  ...

}

以上就是本文的全部内容,希望对大家的学习有所帮助

posted @ 2022-12-20 13:52  很酷的站长  阅读(35)  评论(0编辑  收藏  举报
70博客 AI工具 源码下载