react-native 初次使用

jopen 9年前發布 | 25K 次閱讀 移動Web開發框架 移動開發 react-native
 

前言

這里以編寫react-native android應用程序作為例子來講解(為毛不用IOS?因為沒有mac,也不想裝黑蘋果)

搭建基礎環境

JDK (必須,不解釋)

SDK (建議使用 Android Studio ,集成SDK以及模擬器)

genymotion (如果是使用真機或者Android Studio自帶的模擬器,可以選擇不裝)

NVM (node版本控制器,需要node4.0以上版本)

以上配置不是必須,可自行選擇適合自己的環境,部分安裝過程可能會涉及到KX上網,需要配置代理

踩坑記錄

genymotion

這里選擇genymotion模擬器來講解,也會提一下Android Studio自帶的模擬器的一些注意點,使用真機的朋友可跳過這段。genymotion的安裝有2種模式,一種是帶有Oracle VM VirtualBox虛擬機,另外一種是純凈版,genymotion的運行依賴VirtualBox虛擬機。

選擇下載android6.0-API 23模擬器

react-native 初次使用

如果無法顯示API列表,請配置代理Settings->NetWork->Use HTTP Proxy

啟動模擬器,可能會有部分人卡在android啟動界面上面,無法進入

react-native 初次使用

genymotion的運行基于X86的架構,比起arm,X86的性能更流暢。我們需要使用X86架構的話,還需要安裝HAXM。

1、打開SDK Manager->Extras->Intel x86 Emulator Accelerator,安裝即可,如果沒有任何東西顯示,還是代理問題,Tools->Options->Proxy Settings

2、進入C:\Users\用戶\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager

安裝intelhaxm-android.exe,安裝出錯,請參考 這里

至此我們就能進入模擬器界面

Android Studio

如果想使用android studio自帶模擬器,可以打開AVD Manager->Create Virtual Device->選擇自己需要的android版本

值得注意的是,模擬器默認選擇X86架構,如果你不喜歡,你需要自己手動改成arm架構

react-native 初次使用

NVM

這里選擇用NVM來控制node版本,如果你已經裝過node4.0以上的版本,就跳過這里。安裝方式和使用文檔,github上面講的很清楚,這里說下代理的配置,其實也就是npm的代理,配置全局代理

npm config set proxy=you proxynpm config set https-proxy=you https proxy

React-native初始化

心理默默祈禱以下命令千萬不要錯誤。。。

npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native start
react-native run-android

果然。。。好吧,這里分享下自己遇到的一些問題

npm install -g react-native-cli:出錯的最大可能就是node版本低于4.0或者代理沒配置成功

react-native run-android:這個命令會下載gradle依賴,執行失敗的原因大部分也是因為代理的問題

進入C:\Users\用戶\AppData\.gradle,打開gradle.properties(不存在就新建一個),修改

systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort

總算是把android應用程序跑起來了,真累人啊

react-native 初次使用

總結

先發一篇react-native起步的文章,之后會進行一些實際的案例開發,文章內容如果有哪些不對的地方,歡迎指出。

參考文檔

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