运行ReactNative示例

既然感觉ReactNative开发靠谱, 那么我们就来看看ReactNative都能做哪些好玩的东西, 和原生的有哪些区别?
示例图

iOS模拟器

Android

按照文档安装一些命令行工具, 再下载Git代码.
Github: https://github.com/facebook/react-native

内容很多, 包含一些依赖库和示例(Example), 下载的有点慢, 耐心等待.

下载完成后, 在react-native内, 执行npm install.

Android项目执行, 参考ReactAndroid的README.md.

在react-native目录, 新建local.properties

sdk.dir=/Users/wangchenlong/Installations/android-sdk
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e

执行

cd react-native
./gradlew :ReactAndroid:assembleDebug

再执行

./gradlew :ReactAndroid:installArchives

启动服务

./packager/packager.sh

安装项目

cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug

一定要先启动服务, 再安装项目.
出现transforming 100%, 即导入成功.

导入项目

在最新版本中, 我的红米note4无法运行项目.
报错: Upload package to device fails.
原因是编译的gradle版本太高, 默认1.5.0, 实际1.2.0~1.3.0都可以运行.
我的是1.2.3.

真机调试, 本人红米note(Android 4.2)
摇动手机, 选择Dev Settings->Debug sever host & port for device. 设置IP地址, 观察本机的IP, 填入即可. 我当前的是

192.168.2.202:8081

注意设置端口8081, 否则无法加载. 有些情况可以直接输入IP即可.

Android5.0以上, 直接设置端口即可.

adb reverse tcp:8081 tcp:8081

参考Android的真机调试文档.

IOS模拟器, 太穷没有iPhone. 直接打开open UIExplorer.xcodeproj项目, 执行就可以显示.

开发有两种选择, 一种是直接基于ReactNative开发, 一种是把ReactNative集成到现有的App中, 对于第二种, 我们就需要关注, ReactNative会增大多少代码呢?

使用最基本的HelloWorld做测试, ReactNative也是生成一个简单HelloWorld的JS. 最新生成的HelloWorld的大小是1.4M, 加上ReactNative的是7.6M, 框架大约6.2M左右, 各位可以权衡一下使用.

ReactNative的UIExplorer已经包含了大量示例, 很接近原生, 非常绚丽, 速度也很快. 如Android的ViewPager

ViewPager

OK, 好的开始是成功的一半, 继续探索吧! Enjoy it!