前言
本文開發環境為Windows,目標平台為Android,react-native
版本為0.35.0
。
環境搭建
注意,本文不是按照官網的教程來的,官網說必須安裝什么Chocolatey,我懶得鳥它。
安裝前請准備以下環境:
- jdk(必須1.8或更高版本)
- node.js & npm
- python2(注意不支持python3,我的是2.7)
- android sdk(並且已經配置好相關環境變量)
首先安裝react-native-cli
:
npm install -g react-native-cli
然后我們新建一個helloworld項目,連上你的手機:
cd 你的工作目錄
react-native init helloworld
cd helloworld
react-native run-android
不出問題的話,一個ReactNative的HelloWorld項目就已經成功運行你的手機上了,
生成的apk在helloworld\android\app\build\outputs\apk
目錄下。
HelloWorld運行效果如下:
但是!
我估計一般人都不會這么一帆風順!繼續往后看!
啟動和運行
如果平時只是修改一些js和圖片,沒有重新編譯需求的話,只需要執行react-native start
啟動packager,然后手動打開apk,這種方式更快。react-native run-android
則會先重新打包應用,然后啟動packager,最后啟動你的應用,比較慢。
可能碰到的幾個錯誤
failed to find Build Tools revision 23.0.1
在執行react-native run-android
時你可能報如下錯誤:
failed to find Build Tools revision 23.0.1
打開Android SDK目錄,發現沒有安裝23.0.1:
打開helloworld\android\app\build.gradle
文件,將buildToolsVersion
從23.0.1改為23.0.2:
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
}
再次重新運行react-native run-android
應該就沒問題了。
當然你也可以啟動SDKManager下載安裝Build Tools revision 23.0.1
。
啟動后白屏,控制台報錯
不知為何,我碰到的情況是,apk已經輸出成功了,安裝到4.4的模擬器時沒有任何問題,能夠正常啟動,但是安裝到手機時(LG-G3,剛刷機成MIUI7,Android4.4系統)卻提示如下錯誤:
10-14 14:18:33.647 6526-6526/com.helloworld E/unknown:React: Exception in native call
java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly
at com.facebook.react.cxxbridge.CatalystInstanceImpl.loadScriptFromAssets(Native Method)
at com.facebook.react.cxxbridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:33)
at com.facebook.react.cxxbridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:177)
at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:918)
at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:911)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:74)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:136)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
at java.lang.Thread.run(Thread.java:841)
其中,關鍵錯誤信息是:
Could not get BatchedBridge, make sure your bundle is packaged correctly
解決辦法:定位到helloworld根目錄,執行如下命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
運行截圖:
這一步會在android/app/src/main/assets/下面生成index.android.bundle
和index.android.bundle.meta
這2個文件,然后再次運行應該就沒問題了。