ReactNative學習筆記(一)環境搭建


前言

本文開發環境為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運行效果如下:

W303xH184

但是!

我估計一般人都不會這么一帆風順!繼續往后看!

啟動和運行

如果平時只是修改一些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:

W446xH163

打開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/

運行截圖:

W661xH430

這一步會在android/app/src/main/assets/下面生成index.android.bundleindex.android.bundle.meta這2個文件,然后再次運行應該就沒問題了。

參考

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM