React-navigation StackNavigator 使用攻略

Z时代
2024-01-10
分类：综合

react

目前的项目迭代进展到使用navigation来串联不同的screen，但是在涉及到对navigationOptions进行定制的时候由于版本的问题，网上的很多资料其实都是已经过时了的（有些则是并不相干）。本文针对RN 0.44，React-navigation ^1.0.0-beta.11，进行navigationOptions的解释。

首先是navigationOptions的两种使用方法。一种是在用到的class中声明一个static navigationOptions ，这个适用于需要在navigation上添加一个按钮执行自定义函数的时候使用。使用示范如下图。

在headerRight中我定义了一个Button，里面用到了本类中的组件的函数，在class中声明static navigationOptions 字段有这个好处。

第二种声明方式就是在声明StackNavigator的时候直接对class添加一个navigationOptions的属性，如下图所示。

这种写法比较适用于静态的不需要自己定制的navigation，当然title的操作也是可以用这种方式进行书写的。如下图，只需要把title改成这样的写法就好了。

包含title属性的并不是单引号‘’，而是Tab键上面的· ，这样的写法可以解锁一些神奇的功能。。。不过笔者也是第一次见，孤陋寡闻了。。。

然后是navigationOptions的属性摘录，因为现在网上的大部分属性都是旧版的，在react-navigation ^1.0.0 beta.11 中是用不了的，用了就报错，就提示乱七八糟的Objects are not valid as a React child (found: object with keys {XXX}).If you meant to render a collection of children, use an array instead or wrap the object

using。。。。。咳咳，你懂得。

不过现在经过对比之后我发现其实新版的navigationOptions 貌似就是旧版的原属性的合并，比如说旧版是header 里的backTitle，其实新版里的就是headerBackTitle，合并起来并用驼峰命名法就好啦~ 所以我就懒得找新版的所有关于StackNavigator的navigationOptions啦，旧版的属性差不多，不过隐藏header的话你可以直接写 header：null就好了，不用管visible，当然你也可以尝试下，也是没问题的。下附摘录。

All navigationOptionsfor the StackNavigator：

·title- 界面的标题(string)。

·header- headerbar设置对象。

1)visible - bool值，header是否可见。

2)title-标题 String或者是一个react 节点。

3)backTitle-返回按钮在iOS平台上，默认是title的值。

4)right- react 节点显示在header右边，例如右按钮。

5)left- react 节点显示在header左边，例如左按钮。

6)style-header的style。

7)titleStyle-header的title的style。

8)tintColor-header的前景色.。

·cardStack- 配置card stack。