運行ReactNative的默認工程UIExplorer
使用 React Native 框架可以使用相同的代碼編寫不同平臺的應用. 在學習過程中, 既會兼顧老朋友 Android , 有要熟悉新朋友 iOS . 本文主要介紹運行 RN 的默認工程 UIExplorer .
工作環境是 Mac + V*N + Android Studio + Xcode + PyCharm + 華為P8(Android 5.0) + iPhone 6S 模擬器.
時間: 2016年4月6日, React Native 最新版, 讓我們重新開始吧.
React Native
前置的環境配置, 參考ReactNative官網的Requirements. 需要安裝一些工具. 本文介紹在啟動項目時, 容易導致的一些問題.
Android配置
GitHub 的 React Native 項目, 參考. RN 項目較新, 問題可能會比較多, 我會詳細介紹, 可能遇到的問題, 讓大家更多地了解這個有趣的項目.
下載 React Native 項目
git clone https://github.com/非死book/react-native.git
進入 React Native 文件夾, 編譯 Android 項目.
./gradlew :Examples:UIExplorer:android:app:installDebug
可能需要下載
gradle, 大小約100M+, 比較慢, 耐心等待.
構建完成之后, RN 的 App 已經成功安裝到手機中.
Android
常見錯誤
下載失敗: 需要刪除文件, 重新下載即可, 如:
Could not expand ZIP '/Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip'
刪除即可
rm /Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip
Boost是 Cpp 重要的庫, 比較大100M左右, 下載較慢.
安裝錯誤: Gradle 的編譯版本過高, 不兼容部分5.0+手機, 需要降低版本為 1.3.
Installing APK 'app-debug.apk' on 'HUAWEI GRA-TL00 - 5.0.1' for app:debug
Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])
使用 Android Studio 打開 React Native 的項目, 修改最外層工程的 build.gradle 配置, 降低 gradle的 build 為1.2.3版本.
buildscript {
repositories {
jcenter()
mavenLocal()
}
dependencies {
classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3
classpath 'de.undercouch:gradle-download-task:2.0.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
需要重新設置 Gradle 的 Wrapper , 修改為2.2版本.
Gradle version 2.2 is required. Current version is 2.11
NDK路徑: 在工程的 local.properties 中, 添加 NDK 的路徑.
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e
服務配置
安裝 NPM 的插件, 可能會需要權限進行存儲, 時間較長, 耐心等待.
sudo npm install
NPM 安裝 React Native 的支持庫. RN 是 JavaScript 編寫的, 需要 Node 環境支持.
修改 ADB 的 TCP 端口號, 映射為8081, 針對于5.0以上手機有效.
adb reverse tcp:8081 tcp:8081
5.0以下的手機, 檢測當前的網絡IP地址, 手動添加入App.
啟動服務
npm start
Server
晃動 Android 手機, 即進入菜單頁面, 選擇 Reload JS 項, 重新加載頁面即可顯示.
OK, Android 項目加載成功!
修改下載源
使用淘寶的 NPM 下載源, 可以加快下載速度.
npm config set registry=http://registry.npm.taobao.org/
配置地址在根目錄的 .npmrc 中, 即
registry=http://registry.npm.taobao.org/
iOS配置
相比于 Android 配置的復雜性, iOS 配置比較簡單. 需要升級 Xcode 的最新版本.
在 Xcode 中, 啟動 UIExplorer 項目中的UIExplorer.xcodeproj即可.
不要關閉服務, 運行項目, 會自動加載數據.
iOS
Android 和 iOS 的配置都已經完成, 都可以運行自帶 Demo - UIExplorer .
讓我們繼續學習新的知識吧, 運行 Hello World 是成功的一半.
OK, that's all! Enjoy it!
文／SpikeKing（簡書作者）
原文鏈接：http://www.jianshu.com/p/bcaaf51a9d0b