Windows下搭建React Native環境與Android Studio集成

作者Blog

自己的環境如下：

win10 x64專業版

nodejs 4.5

react native 0.35.0

1. 安裝Nodejs

• Node.js官方下載地址

  安裝完成之后可以在命令行(不過現在我一般用PowerShell)下 ，使用 node -v 看看版本和是否安裝成功

2. 命令行操作

• 安裝nrm并切換到cnpm，不安裝的話在后面init項目的時候一般會失敗

  npm install -g nrm 
  nrm use cnpm

• 安裝react-native-cli，可以不裝

  npm install -g react-native-cli

3. 安裝Git

這個就不說了，不可能不了解

4. 創建一個React Native應用

react-native init FirstReactNative

靜靜等待創建完成，完成之后是這個樣子

5. 命令行運行

npm start

這個會去執行項目根目錄下的package.json中的這個

啟動之后是這個樣子

然后在瀏覽器訪問一下，稍等一會之后就會出現這樣，我承認稍微等的久了點

http://localhost:8081/index.android.bundle?platform=android

這個樣子說明服務端是準備好了

6. 我就假設Android Studio androidsdk jdk都是配好的

7. 看項目根目錄，進去android這個目錄

NOTICE :不改也是可以的，如果沒有的話就會去下載了，Android Studio下載gradle（你懂得哈），等太久了不要來找我

• 更改工程的gradle tools版本，改成你電腦里面有的，去看看自己以前的工程，我覺得盡量不要低于原有的就好

  

  Paste_Image.png

• 改gradle版本，還是參考你最近的工程

  

  Paste_Image.png

• 改module（我假裝你知道意思）的build.gradle文件

  

  Paste_Image.png

8. 等上面的一切準備就緒，你就可以啟動這個應用

• 如果你是在 本電腦模擬器 上運行

  如果出現一片血紅色的話，說明jsbundle還沒載入，等出現這個之后，可以ReloadJS一下，應該就可以了

  

  Paste_Image.png

  • 如果你是在真機上測試的話，請搖一搖機器，進去設置的界面，在最后填寫好你電腦的ip和端口號（eg: 11.11.11.11:8081），端口號默認是8081，填寫好了之后再ReloadJS一下（搖一搖出現）

9.問題說明NOTICE：

貌似在Android API23及以上的版本會出現permission denied的錯誤，好像是AlertDialog時的動態權限申請沒有做，所以請在API16-API23的機器中進行測試。去看了看源碼，貌似就是這么個原因！

作者Blog