ReactNative Windows下搭建環(huán)境

前期準備:新建一個文件夾,存放搭建環(huán)境所需安裝的軟件,如ReactNaitve Softs(文件夾名不能帶空格)

1.node.js(版本必須高于 8.3)

下載地址http://nodejs.cn/download

image.png

1.1、這個比較簡單,下載后,一路按next安裝,完成后就自動配置好了,不需要另外操作。
1.2、設(shè)置鏡像源為淘寶源,這樣在國內(nèi)訪問會比較快,不用墻也行。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

注意:不要使用cnpm,不然會出現(xiàn)莫名其妙的問題。

設(shè)置鏡像.png

2.安裝python(版本必須為 2.x,不支持 3.x)

下載地址:https://www.python.org/downloads/windows

python_01.jpg
python_02.jpg
python_03.jpg

!注意:安裝時,選擇添加到環(huán)境變量
image.png

3.安裝Yarn、React Native的命令行工具

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)(packager)等任務(wù)。

3.1、安裝yarn

npm install -g yarn react-native-cli
image.png

3.2、安裝完 yarn 后同理也要設(shè)置鏡像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
image.png

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名。

4.安裝git

下載地址:http://gitforwindows.org/
在安裝過程中注意勾選"Use Git from Windows Command Prompt",這樣才會把git命令添加到PATH環(huán)境變量中,其他默認即可

image.png

5.安裝 JDK(1.8以上)

下載地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

JDK.png

下載完成后點擊安裝包開始安裝,一直下一步就好,這里將其安裝在 C盤。
安裝好之后,就需要配置一下環(huán)境變量 , 具體配置如下
image.png

在用戶變量中, 添加新變量,命名為java_home,地址為 C:\Program Files\Java\jdk-10.0.2,注意,我之前的JAVA文件所在地址。
在Path中添加兩個變量。 分別的地址為 C:\Program Files\Java\jdk-10.0.2\bin
可能還有的問題
做完上面的操作之后,有可能還是不行。這里有兩個解決方法。

第一個,重啟一下 cmd
第二個,在Path中,調(diào)整下那兩個bin文件夾的位置(上移到最上面),之后,再重啟cmd
從上面的第二個方法就可以知道,其實,這個javac這個exe文件就在這個bin文件夾中(就是jdk的那個)。


image.png

6.安裝Android Studio

下載地址:http://www.android-studio.org/

android SDK下載:http://www.android-studio.org
1. 禁止第一次啟動
    到AS安裝目錄,打開bin目錄,編輯idea.properties, 在文件末尾添加:
    disable.android.first.run=true
 
2.設(shè)置HTTP代理
   點擊 --->File
         --->Settings
           --->System Settings
            --->HTTP Proxy進行設(shè)置
Host name: mirrors.neusoft.edu.cn 
Port number:80
 
3.找到SDK Manager即可下載
image.png

image.png

image.png

7.安裝Android SDK

更換Android SDK Location(默認在c盤,添加環(huán)境時,很容易爆掉c盤)

7.1、選擇Show Package Details,然后在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

546421-20160709101831702-36057693.png

7.2、在SDK Tools窗口中,選擇Show Package Details,然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。(必須是這個版本)
image.png

image.png
選擇好了上面所需的 SDK 和工具之后,點擊 OK 執(zhí)行安裝。

8.配置 Android SDK 環(huán)境變量

8.1、配置 ANDROID_HOME 環(huán)境變量,將環(huán)境變量設(shè)置為 Android SDK 的安裝目錄。
QQ截圖20180917233223.png

8.2、將 Android SDK 安裝目錄下的 tools 和 platform-tools 加入到系統(tǒng)環(huán)境變量中


QQ截圖20180917003151.png

在cmd輸入adb,可以看到版本信息,證明設(shè)置環(huán)境變量成功。


image.png

9.開啟虛擬化。

在BIOS里面,有CPU頻率那里,有個SVM的,設(shè)為enabled(自行百度當前主板設(shè)置虛擬 )


image.png

image.png

10.安裝 Genymotion 模擬器(支持win7,8,10)

10.1、進入官網(wǎng),我們下載with VirtualBox版,這樣會方便很多。
PS.在下載之前您得首先在官網(wǎng)注冊一個賬號。

QQ截圖20180917004711.png

image.png

image.png

10.2、打開Genymotion,點擊Add按鈕
image.png

選擇Android version為6.0。因為上面在SDK Manager中選擇了6.0的api,所以這里也選6.0.
image.png

選擇一個設(shè)備,這里選了768x1280,可按自已的需求選擇就行。然后點擊Next.
image.png

等待幾分鐘后,就可以下載完成。點Finish即可??梢钥吹?,多了一個設(shè)備。
image.png

10.3、設(shè)置virtualBox
image.png
image.png

image.png

設(shè)置好后,回到Genymotion,選擇剛才新添加的設(shè)置,然后點擊Start
這時,可以看到模擬器啟動起來了。
image.png

11.運行項目

新建一個文件夾,利用命令控制窗口進入文件夾初始化一個項目:react-native init AwesomeProject

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容