手把手教你在Windows下搭建React Native Android開發環境

dwngde 8年前發布 | 355K 次閱讀 Android開發 移動開發 React Native Android

最近看到React Native好像好厲害的樣子,好奇心驅使之下體驗了一下并將在Window下搭建React Natvie Android環境的步驟記錄下來,并有需要的朋友參考。(我都是參考官方文檔的)

</blockquote>

react-native的GitHub地址:https://github.com/非死book/react-native

react-native的文檔地址:http://非死book.github.io/react-native/docs/getting-started.html


1.準備工作:

打開文檔點擊'Android Setup',可以看到需要

(a)安裝Git from Windows(傻瓜式安裝)

(b)Android SDK(配置ANDROID_HOME環境)

(c)使用Gradle構建的(如果你已經在使用Android Studio的這些的都可以忽略了)

手把手教你在Windows下搭建React Native Android開發環境

注:(這些工作要準備好不然最后出錯就好坑了)

手把手教你在Windows下搭建React Native Android開發環境

手把手教你在Windows下搭建React Native Android開發環境

手把手教你在Windows下搭建React Native Android開發環境

2.開始


上面兩張圖都提示我們需要安裝Node.js,打開鏈接下載Node.js進行安裝(傻瓜式安裝)。在這里下載最新的。

手把手教你在Windows下搭建React Native Android開發環境

打開cmd運行執行以下命令

$ npm install -g react-native-cli

</blockquote>

手把手教你在Windows下搭建React Native Android開發環境

手把手教你在Windows下搭建React Native Android開發環境

$ react-native init AwesomeProject

</blockquote>

上面這個命令下載AwsomeProject,如果下載不了可以在我的GitHub的AwesomeProject下載。

命令行在線下載的Awesome默認放到用戶文件夾下。

手把手教你在Windows下搭建React Native Android開發環境

注: AwesomProject下的anroid下的local.properties文件是沒有的,這里我從其他項目直接copy過來。

手把手教你在Windows下搭建React Native Android開發環境

接下來重新打開一個cmd并切換到AwesomProject目錄

執行 npm start,會顯示如圖的提示,然后再輸入react-native start命令。如果顯示如圖那樣,證明你服務已經啟動了,在這里我們可以看到服務的端口是8081.

手把手教你在Windows下搭建React Native Android開發環境

我們在瀏覽器證明服務是否啟動:

在瀏覽器輸入地址:http://localhost:8081/index.android.bundle?platform=android

如果顯示下圖的那樣,那就證明服務已經啟動了。如果沒有啟動的話,接下來那就不用做啦~~~直接break

手把手教你在Windows下搭建React Native Android開發環境

最后我們編譯運行AwesomeProject。有點激動了吧。。。。記得要先打開Genymotin模擬器或者連上真機。

手把手教你在Windows下搭建React Native Android開發環境


執行react-native run-android命令

手把手教你在Windows下搭建React Native Android開發環境

如果顯示下圖,那就說明AwesomeProject項目編譯成功了。

手把手教你在Windows下搭建React Native Android開發環境

最后就是這樣子的啦~~哈哈~~~(改過了index.android.js的效果)

手把手教你在Windows下搭建React Native Android開發環境


真機需要網絡需要在同一個局域網(開個WIFI熱點就可以了)

運行在真機上出現以下這種情況。。。怎么辦

手把手教你在Windows下搭建React Native Android開發環境

(這手機系統是5.0.1的)

在官方文檔可以看到

手把手教你在Windows下搭建React Native Android開發環境

執行adb reverse tcp:8081 tcp:8081命令

手把手教你在Windows下搭建React Native Android開發環境

再點擊RELOADJS~~~

手把手教你在Windows下搭建React Native Android開發環境

以上有誤,請大家諒解和糾正。

</div>

來自:http://my.oschina.net/common1140/blog/550501

 本文由用戶 dwngde 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!