想学React Native?你只需要一个App!(11月5号更新)

7 篇文章 2 订阅
6 篇文章 2 订阅

最近有点空闲时间,顺手研究下react-native,2013年的时候在老师的指导下使用jQuery Mobile做过手机应用,那个运行速度慢呀!让我对WebApp和PhoneGap这一类的跨平台App没有信心,毕业之后由于长时间做原生开发也就没有再去关注这些东西,最近一年RN风头一直很强劲,搞得我心痒痒,前段时间工作很忙,最近闲下来就玩玩这个。关于RN,最好的学习网站当然还是RN中文网,但是这里有一些知识点不全,新手照着敲可能也见不到效果,于是我做了一个App,把RN的基础知识点包括一些高级知识点全部做成可以看见的效果,这样方便小伙伴们学习。

目前的版本,主要包括如下知识点:

index.android.js    该文件主要包含了页面导航组件Navigator的基本使用

~/1031/MainPage.js   该文件涉及到了基本的页面跳转,点击事件的不同绑定方式以及不同的传参方式

~/1031/NetImage.js   该文件涉及到了基本的图片加载方式,以及页面出栈等操作

~/1031/SayHello.js    该文件展示了RN中props的基本用法

~/1031/ShowOrHide.js  该文件展示了state属性的基本用法

~/1031/GetJson.js     该文件展示了一个基本的网络请求,获取一段json数据,以及获取到数据后该如何处理

~/1031/ListView.js     该文件展示了RN中ListView的基本用法


OK,目前做的功能就是这么多,这些效果都可以在运行App之后,在主页面点击相关按钮查看。如下图:



更多效果正在完善中,本文也将持续更新。


项目地址https://github.com/lenve/RNTest


欢迎小伙伴们fork,star,也欢迎小伙伴们为此项目添砖加瓦。


11月2号更新

1.   DetailPage.js  该页面用来展示ListView中的每一个item,主要演示了RN中WebView的用法

2.   在MainPage.js页面中捕获了Back按键的点击事件,让路由中的Component进行出栈。这里主要演示了如何捕获Back按键的点击事件,以及如何在Back按键的监听中处理Navigator中Component的出栈操作。

11月3号更新

1. ~/1103/AdsViewPager.js 该页面展示了一个广告条ViewPager
2. ~/1103/FlexBox.js 该页面展示了FlexBox的基本用法以及Image的常见属性

 

11月5号更新

1.~/1104/Ctrip.js 该页面模仿了携程旅行,主要展示了FlexBox的基本用法,效果图如下:



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值