混合开发的大趋势之一React|混合开发的大趋势之一React Native之页面跳转
转载请注明出处：王亟亟的大牛之路
最近事情有点多，没有长时间地连贯学习，文章也停了一个多礼拜，愧疚，有时间还是继续学习，继续写！
还是先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android（最近还是保持日更，除非忙的起飞活着出去玩不然都是更的，不信你看）
文章图片
废话不多，贴下运行效果
文章图片
【混合开发的大趋势之一React|混合开发的大趋势之一React Native之页面跳转】登陆前
文章图片
登录成功后
文章图片
部分代码借鉴：https://github.com/SpikeKing/WclNavigator
rn的页面跳转都是交由Navigator来处理，我们看下文档了解这个常用的组件Navigator
Navigator 实质上是调用的Native的任务栈通过一系列路由做推送跳转等逻辑的，所以调的还是源生内容。
他有非常多实用的回调函数，注入renderScene configureScene 等等等
Navigator正常运行需要以下几个步骤
1.初始化路由 —>initialRoute
2.配置跳转动画 —>configureScene
3.渲染场景 —>renderScene
代码是最好的注解，我们直接边看代码边解释，先是index.Android.js
为了让逻辑更清晰我们把之前登录的代码 放到了login.android.js
index页面专心做”配置”
文章图片
文章图片
因为我们首页实质上不做展示而是直接跳转到login页面，所以我们先配置Navigator，初始化各个函数，然后推给Login这个我们在开始就定义的”组件”，这部分如何实现跳转的可以看知识传送门，写得很详细，我没必要再画蛇添足了
ndex其实就是做了一堆配置然后就传递给login了，但是他做了一个很重要的行为，构造了Navigator属性，然后后续的页面进行传递
登录页面
登录页面和上一个例子里的代码没什么区别，主要差异就是再判断表单之后进行跳转页面，代码如下
name是我们我们要跳转页面传给下一个页面的参数
它可以在 this.props.name得到我们login页面传递过去的值
type是我们跳转的动画效果，对应的找Navigator的configureScene方法
文件头也要申明我们下一个被跳转的组件
文章图片
push类似于 我们平时的startActivity的行为，API介绍可以看http://facebook.github.io/react-native/docs/navigator.html
登陆成功了那就跳到了我们的首页
文章图片
我们在首页的componentDidMount方法里把传来的参数给Main页面的name字段赋值，然后呈现在Text上就行了
总结：
这是个很强大的控件，可用于页面跳转。
要是用只需要
1.构造Navigator
2.配置Navigator结合业务逻辑
3.调用push，jump等方法进行跳转
源码地址：https://github.com/ddwhan0123/ReactNativeDemo
推荐阅读
- 如果最后陪我的是你，那么我就不会羡慕任何人
- “雪梨”不止是你所知道的那个网红而已
- 童谣里的童年
- 投稿|欢迎来到元宇宙的硬核未来
- 职场经验|JMeter中如何实现接口之间的关联（）
- IT|怎么都在叫做软件测试（我做软件测试工作的两大乐趣）
- 职场经验|程序人生 | 二线城市年薪超40W（疫情之下涨薪100% + 是怎么做到的？）
- Hadoop|Hadoop集群的webUI监控界面设置Simple安全机制
- json.stringify()的妙用
- 数据分析|写给喜欢数据分析的初学者