React-navigation StackNavigator 使用攻略

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。

1)gesturesEnabled-是否允许通过手势关闭该界面,在iOS上默认为true,在Android上默认为false。

以上是 React-navigation StackNavigator 使用攻略 的全部内容, 来源链接: utcz.com/z/383889.html

回到顶部