既然感覺(jué)ReactNative開(kāi)發(fā)靠譜, 那么我們就來(lái)看看ReactNative都能做哪些好玩的東西, 和原生的有哪些區(qū)別?
示例圖
按照文檔安裝一些命令行工具, 再下載Git代碼.
Github: https://github.com/facebook/react-native
內(nèi)容很多, 包含一些依賴庫(kù)和示例(Example), 下載的有點(diǎn)慢, 耐心等待.
下載完成后, 在react-native內(nèi), 執(zhí)行npm install.
Android項(xiàng)目執(zhí)行, 參考ReactAndroid的README.md.
在react-native目錄, 新建local.properties
sdk.dir=/Users/wangchenlong/Installations/android-sdk
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e
執(zhí)行
cd react-native
./gradlew :ReactAndroid:assembleDebug
再執(zhí)行
./gradlew :ReactAndroid:installArchives
啟動(dòng)服務(wù)
./packager/packager.sh
安裝項(xiàng)目
cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug
一定要先啟動(dòng)服務(wù), 再安裝項(xiàng)目.
出現(xiàn)transforming 100%, 即導(dǎo)入成功.
在最新版本中, 我的紅米note4無(wú)法運(yùn)行項(xiàng)目.
報(bào)錯(cuò):Upload package to device fails.
原因是編譯的gradle版本太高, 默認(rèn)1.5.0, 實(shí)際1.2.0~1.3.0都可以運(yùn)行.
我的是1.2.3.
真機(jī)調(diào)試, 本人紅米note(Android 4.2)
搖動(dòng)手機(jī), 選擇Dev Settings->Debug sever host & port for device. 設(shè)置IP地址, 觀察本機(jī)的IP, 填入即可. 我當(dāng)前的是
192.168.2.202:8081
注意設(shè)置端口8081, 否則無(wú)法加載. 有些情況可以直接輸入IP即可.
Android5.0以上, 直接設(shè)置端口即可.
adb reverse tcp:8081 tcp:8081
IOS模擬器, 太窮沒(méi)有iPhone. 直接打開(kāi)open UIExplorer.xcodeproj項(xiàng)目, 執(zhí)行就可以顯示.
開(kāi)發(fā)有兩種選擇, 一種是直接基于ReactNative開(kāi)發(fā), 一種是把ReactNative集成到現(xiàn)有的App中, 對(duì)于第二種, 我們就需要關(guān)注, ReactNative會(huì)增大多少代碼呢?
使用最基本的HelloWorld做測(cè)試, ReactNative也是生成一個(gè)簡(jiǎn)單HelloWorld的JS. 最新生成的HelloWorld的大小是1.4M, 加上ReactNative的是7.6M, 框架大約6.2M左右, 各位可以權(quán)衡一下使用.
ReactNative的UIExplorer已經(jīng)包含了大量示例, 很接近原生, 非常絢麗, 速度也很快. 如Android的ViewPager
OK, 好的開(kāi)始是成功的一半, 繼續(xù)探索吧! Enjoy it!
