前言

本文開發環境為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 23buildToolsVersion "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 calljava.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctlyat 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個文件，然后再次運行應該就沒問題了。

參考

react-react-native-的es5-es6寫法對照表
React Native官方指南

總結

以上是生活随笔為你收集整理的ReactNative学习笔记（一）环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。