RN8_React-Native知识点1之-Navigator导航学习

RN8_React-Native知识点1之-Navigator导航学习

参考：http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B

这一章主要是写Navigator的使用和理解。

Navigator的简单使用：

基础页：

代码分析：

1、let defaultName = 'FirstPageComponent';

这里定义了这个组件的名字。

2、initialRoute={{name:defaultName, component:defaultComponent }}

指定默认界面，也就是启动app之后会看到的界面的第一屏。 需要填写两个参数:name跟 component。（注意这里填什么参数纯粹是自定义的，因为这个参数也是你自己发自己收，自己在renderScene方法中处理。我们这里示例用了两个参数，但其实真正使用的参数只有component）

3、configureScene={(route) => {

return Navigator.SceneConfigs.VerticalDownSwipeJump;

              }}

这里是界面间的跳转时候的动画。

4、renderScene={(route, navigator)

回调里的两个参数:route, navigator：route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，它有push pop jump...等方法，是我们等下用来跳转页面用的那个navigator对象。

5、return <Component {...route.params} navigator={navigator} />

如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，然后navigator作为props传递给了这个component。

 

第一页：

我们可以直接拿到这个 props.navigator。

创建了一个可以点击的区域，让我们点击可以跳到SecondPageComponent这个页面，实现页面的跳转。

第二页：

现在来创建SecondPageComponent，并且让它可以再跳回FirstPageComponent。

Navigator的API：

界面间的传参和取参：

传参

通过push就可以了：

params的来历：

这个语法是把 routes.params里的每个key作为props的一个属性:

这里的 params.id 就变成了 传递给了下一个页面。

取参