運行ReactNative示例

既然感覺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

OK, 好的開始是成功的一半, 繼續探索吧! Enjoy it!