關於react-native搭建開發環境 (android)

sunshinezhong發表於2018-01-31

作為第一次用rn開發的小白只有參照。

可以借鑑的 https://reactnative.cn/docs/0.51/getting-started.html#content

簡單粗暴,直接上碼

看到官方文件要下載那麼多,說實話,看到打腦殼。希望直接裝載好依賴直接看到介面,我喜歡簡單粗暴

1.下載Node

choco install nodejs.install
複製程式碼

2.下載react-native,這裡AwesomeProject是專案的名字

react-native init AwesomeProject
複製程式碼

3.進入專案

cd AwesomeProject
複製程式碼

4.啟動安卓模擬器,這裡啟動的時候需要在Visual Studio啟動,可以參考下面圖片來啟動

react-native run-android
複製程式碼
  • 在Visual studio 裡面找到這個小手機點選開啟,這裡有個坑。有可能啟動找不到小手機。需要看右下角點選configer。或者重啟一下
    關於react-native搭建開發環境 (android)
  • 一般我用API25的版本。
    關於react-native搭建開發環境 (android)
  • 啟動完成的介面,進行頁面書寫可以在app.js檔案。或者你從新建個src檔案也行。這裡啟動也有個坑。需要去配置個東西
    關於react-native搭建開發環境 (android)

這裡最麻煩的是就是Visual Studio 的配置,具體的可以參考官方的API.

5.App啟動流程

  • 目錄“..\android\app\build.gradle” android裡面的,ndk看下是不是

abiFilters "armeabi-v7a", "x86"

  • “..\android\app\proguard-rules.pro” 最後的地方

-keep class android.text { ;} -dontwarn android.text.

  • “..\android\gradle.properties” 最後的地方,這裡進行配置埠,賬號密碼是你電腦的

org.gradle.jvmargs=-Xmx2048m systemProp.http.proxyHost=s1firewall systemProp.http.proxyPort=8080 systemProp.http.proxyUser= systemProp.http.proxyPassword= systemProp.https.proxyHost=s1firewall systemProp.https.proxyPort=8080 systemProp.https.proxyUser= systemProp.https.proxyPassword=

  • 開啟模擬器 確認8081埠是否被佔用 如果被佔用關閉8081埠
netstat -aon|findstr "8081" 這個是確認埠是否被佔用      taskkill /F /PID <idCode> 這裡填寫需要關閉的埠號
複製程式碼
  • 確保已經連線到模擬器 在APP目錄下輸入 react-native run-android 執行

  • 虛擬機器快捷鍵

Android: ctrl+M 開啟選項 連續點選兩次R鍵重新整理

ios: command+d 開啟選項 Command⌘ + R 重新整理

第一次在這裡發表文章,有什麼不對的地方或者不懂得歡迎評論。

相關文章