混合开发的大趋势之一React Native之页面跳转

转载请注明出处:王亟亟的大牛之路

最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写!

还是先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android(最近还是保持日更,除非忙的起飞活着出去玩不然都是更的,不信你看)


废话不多,贴下运行效果


登陆前


登录成功后


部分代码借鉴: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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容