继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

React Native入门(三):react-navigation点击页面跳转

球球789
关注TA
已关注
手记 6
粉丝 11
获赞 28

导航器下载:

React native导航器分2.X和3.X,写法也不一样。用yarn add react-navigation可以下载导航组件,但默认是下载最新的版本,如果看着2.X的教程用着3.X的组件,那么报的错就会找不到北了。

下载2.X完美解决:yarn add react-navigation@^2.18.3


入门实例:从一个页面点击按钮跳转到另外一个页面

初始化项目以及导航器下载后,开始react-navigation第一个例子,那就是从HomePage页面点击按钮跳转到Page1页面。

1、首页需要建一个导航器,做法新建文件夹navigators,在navigators中建立AppNavigators.js的空白js文档。

2、建立一个放页面的文件夹page,在page中建立两个页面HomePage和Page1,代码如下

HomPage.js:

https://img4.mukewang.com/5ca852540001f2ce04720328.jpg

Page1.js:

https://img.mukewang.com/5ca8527900012b8903950229.jpg

3、修改AppNavigators.js,实现跳转功能。    

       先导入导航组件,再导入页面,最后声明路由。

https://img1.mukewang.com/5ca852a10001915804870216.jpg

5、运行成功,点击跳转到page1



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP