由於最近把電腦系統從window7升級到window10原來的react-native項目跑不起來折騰了1-2天,這次得地把react-native安裝的步驟以及遇到的坑寫下來,防止以後繼續踩坑以及給其他同樣遇到這樣問題的開發者提供一些幫助。
目標平臺
android和window10
安裝
必需的軟件
Python 2
直接去官方下載安裝包然後雙擊安裝即可,我裝的是python2.7.6。
csdn下載地址:https://download.csdn.net/download/qq243348167/12535314
node
直接去官方下載安裝包然後雙擊安裝即可,我裝的是node-v8.16.2-x64。
csdn下載地址:https://download.csdn.net/download/qq243348167/12535329
安裝完 node 後建議設置 npm 鏡像以加速後面的過程(或使用科學上網工具)。注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Yarn、React Native 的命令行工具(react-native-cli)
npm install -g yarn react-native-cli
安裝完 yarn 後同理也要設置鏡像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Android Studio
React Native 目前需要Android Studio2.0 或更高版本。我安裝的是2.2.3。
確定所有安裝都勾選了,尤其是Android SDK
和Android Device Emulator
。
在初步安裝完成後,選擇Custom
安裝項:
檢查已安裝的組件,尤其是模擬器和 HAXM 加速驅動。
在SDK Platforms
窗口中,選擇Show Package Details
,然後在Android 6.0 (Marshmallow)
中勾選Google APIs
、Android SDK Platform 23
、Intel x86 Atom System Image
、Intel x86 Atom_64 System Image
以及Google APIs Intel x86 Atom_64 System Image
。
在SDK Tools
窗口中,選擇Show Package Details
,然後在Android SDK Build Tools
中勾選Android SDK Build-Tools 23.0.1
(必須是這個版本)。然後還要勾選最底部的Android Support Repository
.
Android Studio一開始安裝2.1.3在編譯到模擬器的時候報錯說和gradle的版本不止一致。我這邊項目gradle版本是gradle-2.14.1-all,下面是gradle對應Gradle插件的版本,Gradle插件版本要和Android Studio的版本一致。
Android Studio項目編譯的時候一直報錯 Gradle sync failed: Connection reset,這是因爲services.gradle.org/distributions無法訪問,可以把對應的gradle下載到本地然後在gradle-wrapper.properties中如下配置。
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=file:///D:/project/gradle/gradle-2.14.1-all.zip
或使用科學上網工具在gradle.properties配置。
systemProp.https.proxyPassword=
systemProp.https.proxyHost=127.0.0.1
systemProp.http.proxyHost=127.0.0.1
systemProp.https.proxyPort=60210
systemProp.https.nonProxyHosts=
systemProp.https.proxyUser=
夜神模擬器
直接去官方下載安裝包然後雙擊安裝即可。
首先運行夜神模擬器,通過cmd命令窗口進入sdk目錄使用adb命令連接模擬器。
cd C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools
adb.exe connect 127.0.0.1:62001
adb devices--查看已經連接成功的設備
在Android Studio中點擊運行即可把項目運行到模擬器
在模擬器中設置代理IP,這邊我電腦的IP是172.18.1.141,所以配置的是172.18.1.141:8081
在cmd命令窗口進入我們的項目執行以下命令程序即可正常運行。
cd D:\project\SHServiceApp
npm start
其他操作
到這裏我們的項目就可以正常跑起來了。如果你要把項目打包成apk文件,在cmd命令窗口執行以下命令即可。在項目的D:\project\SHServiceApp\android\app\build\outputs\apk這個文件夾中會生成對應的apk文件。
$ cd android && .\gradlew assembleRelease
下面介紹一下項目初始化的命令
react-native init SHServiceApp --version 0.44.3
npm install
下面介紹一下插件的安裝以及卸載,以爲例react-native-easy-toast
npm install react-native-easy-toast
npm uninstall react-native-easy-toast