运行ReactNative示例

jopen 4年前

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

按照文档安装一些命令行工具, 再下载Git代码.
Github: https://github.com/非死book/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%, 即导入成功.

导入项目

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

192.168.2.202:8081

注意一定要设置端口8081, 否则无法加载.

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!

来自: http://blog.csdn.net//caroline_wendy/article/details/49534847