好多人說rn好用，一直要推薦我用绊寻，我就不信了花墩，來安裝玩一下試試效果。實(shí)踐出真知澄步！安裝過程各種坑观游，工具太多了，太麻煩了驮俗，差點(diǎn)放棄（還好堅(jiān)持下來呢）懂缕。

本文示例代碼請查看Github: https://github.com/AweiLoveAndroid/Hybrid-sample

一、安裝環(huán)境

（一）下載JDK 1.8（必須是1.8版本）

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

• JDK需要配置兩個(gè)環(huán)境變量：（如果已配置就無需再配置）

PATH：%JAVA_HOME%\bin
CLASSPATH：.;%JAVA_HOME%\lib\tools.jar （一定不要忘了前面的點(diǎn)） 

（二）Android Studio王凑、SDK搪柑、JDK以及模擬器配置（如果是真機(jī)運(yùn)行不需要安裝模擬器）

• （1）Android Studio下載

  Android Studio的下載地址請看：https://developer.android.google.cn/studio/#downloads
  安裝方式：指定安裝路徑，一直點(diǎn)擊下一步就可以了索烹。然后解壓到一個(gè)英文目錄即可工碾。

• （2）Android Studio安裝

1.雙擊桌面的Android Studio圖標(biāo)（或者進(jìn)入解壓之后的路徑/bin目錄，雙擊studio.exe）百姓，會(huì)出現(xiàn)一個(gè)導(dǎo)入配置的窗口渊额，如圖所示。

im

2.因?yàn)槭浅醮未蜷_Android Studio垒拢，我們一般不需要導(dǎo)入配置旬迹，直接點(diǎn)擊Do not import settings，點(diǎn)擊OK進(jìn)入下一步求类，這時(shí)候會(huì)顯示logo加載頁面奔垦。如圖所示。

3.然后會(huì)有一個(gè)彈窗如圖所示尸疆。因?yàn)槭状卧试SAndroid Studio它找不到SDK,會(huì)提示你設(shè)置代理椿猎，我這里選擇取消惶岭。

然后我們打開android studio安裝路徑/bin目錄，找到idea.properties,打開這個(gè)文件,在末尾加上一行
disable.android.first.run=true,那么以后再打開android studio就不會(huì)再出現(xiàn)這個(gè)提示犯眠。如圖所示：

4.接下來我點(diǎn)擊next進(jìn)入下一步按灶，如圖所示。

5.然后會(huì)提示我安裝版本筐咧，第一個(gè)是標(biāo)準(zhǔn)安裝鸯旁，第二個(gè)是自定義安裝，我們這里選擇默認(rèn)的第二個(gè)自定義安裝嗜浮，直接點(diǎn)擊next進(jìn)入下一步既可。如圖所示：

image.png

6.然后就是設(shè)置風(fēng)格摩疑，這里有白色和黑色可選危融，我選擇的右邊的黑色，如圖所示雷袋。

7.接下來是設(shè)置安裝選項(xiàng)吉殃，如圖所示。默認(rèn)會(huì)安裝Android SDK 以及Android SDK Platform楷怒，由于我電腦用的Intel的CPU蛋勺，所以我這里勾選了第三個(gè)選項(xiàng)Intel HAXM，這個(gè)主要是啟動(dòng)模擬器時(shí)加速用的鸠删，順便我把第四個(gè)模擬器選項(xiàng)也勾選上抱完，后續(xù)如有需要可以在模擬器安裝App進(jìn)行操作。最下面是sdk的安裝路徑刃泡。默認(rèn)是在C盤巧娱，一般我們要選定一個(gè)非C盤的安裝目錄，比如我這里選擇的是D:\develop\sdk路徑烘贴。選好之后點(diǎn)next進(jìn)入下一步禁添。

8.這里是設(shè)置Intel HAXM默認(rèn)的大小，我這里就選擇默認(rèn)的2G桨踪，如圖所示老翘。點(diǎn)擊next進(jìn)入下一步。

9.現(xiàn)在就開始安裝sdk了锻离，稍作等待既可安裝完成了铺峭，如圖所示。

10.安裝完成之后汽纠，點(diǎn)擊Finish表示安裝完成逛薇。如圖所示。

• （3）JDK 配置

1.首先打開java官網(wǎng)
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html疏虫，找到對應(yīng)版本下載永罚，如圖所示啤呼，我的電腦是Win7 64位，我就選擇最后一個(gè)下載呢袱。

2.下好之后官扣，雙擊安裝，一直點(diǎn)擊下一步羞福，選擇安裝路徑惕蹄，安裝完畢之后，配置環(huán)境變量治专。

打開環(huán)境變量的步驟：桌面“我的電腦”（或“計(jì)算機(jī)”）--> 右鍵“屬性”--> 選擇“高級系統(tǒng)設(shè)置”-->選擇下方的“環(huán)境變量”卖陵。

a.在彈出的“環(huán)境變量”窗口中，點(diǎn)擊下方的“新建”按鈕张峰，在彈出的“新建系統(tǒng)變量”窗口中泪蔫，新建一個(gè)名為JAVA_HOME的環(huán)境變量，變量值為Java的安裝路徑喘批，我的為：D:\develop\jdk\撩荣。
b.編輯Path環(huán)境變量，在原變量值的最后面加上;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
c.新建一個(gè)名為“CLASSPATH”的環(huán)境變量饶深，變量值為：
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

如圖所示：

d.然后打開命令行餐曹，輸入java -version，如果有版本號(hào)輸出敌厘，說明環(huán)境配置好了台猴，否則請按上述步驟重新操作一次。具體輸出如圖所示：

• （4）SDK和安卓模擬器：

1.我們雙擊打開Android Studio俱两，進(jìn)入歡迎頁卿吐，如圖所示：

2.然后打開右下角的Configure右邊的倒三角按鈕，選擇Settings锋华，如圖所示：

3.然后一次選擇Appearance and Behavior --> System Settings --> Android SDK嗡官，進(jìn)入Android SDK頁面,我們可以看到SDK Platforms,這個(gè)就是前面安裝的時(shí)候默認(rèn)安裝的那個(gè)文件，是sdk的核心文件毯焕。我們看看Android API 28下面有一個(gè)Google APIs Intel x86 Atom System Image模擬器衍腥，這個(gè)是帶有包含Google Play service 等 Google 的應(yīng)用和服務(wù)的模擬器，一般情況我們使用Intel x86 Atom System Image模擬器（32位）纳猫，或者Intel x86 Atom_64 System Image模擬器（64位）就可以了婆咸。在實(shí)際開發(fā)中，為了兼容不同版本芜辕，你可以根據(jù)需要下載不同API對應(yīng)的模擬器尚骄。如圖所示。

【注意】關(guān)于Build Tools 版本的一些建議侵续，建議下載Android SDK Platform 不同版本 以及對應(yīng)的SDK Tools 版本倔丈。每一個(gè)文件的詳細(xì)信息說明截圖如下：

4.需要在Path環(huán)境變量中添加兩個(gè)值憨闰。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。（如果已經(jīng)配置需五，就不用再去配置了鹉动。）

D:\android-sdk\tools;
D:\android-sdk\platform-tools;

（三）安裝node和yarn

許多前端工具的安裝都依賴于node的包管理器npm。node安裝請查看我的另一篇博客宏邮，有專門的講解：nodejs泽示、npm和yarn安裝和使用和填坑詳解 http://www.reibang.com/p/9eba0e2c0697

（四）Python2.X（不支持Python3.X）

• 下載：

  我這里用的版本是2.7.13，下載地址：https://www.python.org/downloads/release/python-2713/

• 安裝：

  雙擊蜜氨，指定路徑械筛，下一步就可以完成安裝了。

• 配置環(huán)境變量：

  示例如下：

E:\develop\Python2.7.13\Scripts;

• 查看python安裝版本：

  輸入python命令即可飒炎。

查看python安裝版本

（五）react native

react native中文網(wǎng) https://reactnative.cn/

• 使用npm命令行安裝react native埋哟，如下：

    npm install -g react-native-cli

如圖所示：

下載react-native-cli

• 查看本地react-native-cli版本號(hào)，使用命令：

    react-native --version
    // 或者
     react-native -v

圖示如下厌丑，我當(dāng)前的react-native-cli版本號(hào)為2..0.1：

查看本地react native版本號(hào)

這時(shí)候會(huì)看到react native n/a - not inside a React Native project directory定欧，意思是不在一個(gè)RN項(xiàng)目根路徑執(zhí)行這個(gè)命令渔呵，那么就不會(huì)顯示rn的版本號(hào)信息怒竿。我們接下來放到rn的項(xiàng)目根路徑，重新執(zhí)行該命令扩氢，就會(huì)看到rn的版本信息是0.60.0耕驰，如下圖所示：

image.png

• 查看react native所有版本信息，使用命令：

    npm info react-native

圖示如下录豺，其中第一個(gè)就是當(dāng)前我們下載的這個(gè)版本：

查看react native所有版本信息

• 升級react native版本朦肘，使用命令：

    npm install --save react-native@0.60.0

其中0.60.0是版本號(hào)，可以使用命令 npm info react-native查看所有的rn的版本信息双饥，找一個(gè)你想要下載的版本即可媒抠。

（六）說明

1.安裝完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令咏花，用yarn add 某第三方庫名代替npm install --save 某第三方庫名趴生。

例如：

以前是npm命令：npm install --save react-native@0.56.0
你可以使用yarn命令替代：yarn add react-native@0.56.0

2.加快react native啟動(dòng)的幾種方式：

主要還是給npm和yarn設(shè)置鏡像，詳細(xì)講解請看我的另一篇博客昏翰，有專門的講解：nodejs苍匆、npm和yarn安裝和使用和填坑詳解 http://www.reibang.com/p/9eba0e2c0697

二、運(yùn)行首個(gè)App

（一）使用命令行創(chuàng)建新項(xiàng)目

使用react-native init 項(xiàng)目名稱創(chuàng)建項(xiàng)目棚菊，如圖所示：

創(chuàng)建新項(xiàng)目

（二）手動(dòng)打開安卓模擬器（不開啟Android Studio也可以打開模擬器）

1.首先在電腦的C盤的C:\Users\Administrator\.android\avd這個(gè)目錄找到你創(chuàng)建的模擬器的名稱浸踩，去掉后綴名，復(fù)制一下统求。比如我的是：Pixel_API25_7.1.1_x86_1080x1920_xxhdpi_5.0inch.avd检碗，如圖所示：

2.創(chuàng)建一個(gè)使用腳本据块，新建一個(gè)文件，后綴名為.bat后裸，然后用記事本打開瑰钮，輸入以下內(nèi)容：，其中E:\develop\sdk\tools\emulator.exe是模擬器所在sdk的路徑微驶，換成你電腦里面對應(yīng)路徑即可浪谴。

E:\develop\sdk\tools\emulator.exe -netdelay none -netspeed full -avd Pixel_API25_7.1.1_x86_1080x1920_xxhdpi_5.0inch -writable-system

3.雙擊剛才創(chuàng)建的腳本，即可開啟模擬器了因苹。

雙擊命令：

雙擊命令

模擬器正式開始如圖：

模擬器正式開始

（三）編譯并運(yùn)行 React Native 應(yīng)用

在剛創(chuàng)建的rn項(xiàng)目根目錄苟耻，打開命令行，輸入react-native run-android命令：

這個(gè)時(shí)候會(huì)去檢查gradle環(huán)境扶檐，如果沒有指定gradle版本凶杖，會(huì)下載gradle到本地。比如這里下載的是gradle-5.4.1-all這個(gè)版本款筑。下載完成會(huì)自動(dòng)編譯項(xiàng)目智蝠，如下圖所示：

運(yùn)行項(xiàng)目

運(yùn)行成功如下圖所示：

三、出現(xiàn)的問題

（1） 運(yùn)行項(xiàng)目出現(xiàn) Unable to load script...

點(diǎn)擊RELOAD奈梳，重新嘗試杈湾。

（2）The development server returned response error code: 500

解決方式：
在剛創(chuàng)建的項(xiàng)目的根目錄運(yùn)行下列代碼：
首先執(zhí)行yarn remove babel-preset-react-native，然后再執(zhí)行yarn add babel-preset-react-native@2.1.0

（3）Cound not connect to development server.

無法連接到服務(wù)器攘须。大致翻譯如下：

連接不到開發(fā)的服務(wù)器漆撞。

請按照以下的步驟來修復(fù)此問題：

確保包服務(wù)器在運(yùn)行
確保你的設(shè)備或者模擬器連接著電腦，并且手機(jī)打開了USB調(diào)試模式于宙，然后在cmd中運(yùn)行adb devices來查看已經(jīng)連接好的設(shè)備列表
確保飛行模式是關(guān)閉的
如果是使用真機(jī)來開發(fā)浮驳，輸入 adb reverse tcp:8081 tcp:8081來檢查設(shè)備
輸入U(xiǎn)RL：例如：http://10.0.1.1:8081

解決：

• 1.檢查硬件連接，以及使用adb devices來查看是否連接成功捞魁。
• 2.可能是node版本與react native需要用到的版本沖突至会，升級node到最新版，再試試看谱俭。
• 3.打開開發(fā)者選項(xiàng)奉件，關(guān)閉飛行模式。

（4）關(guān)于命令行提示gradle的一些錯(cuò)誤

建議：把項(xiàng)目里面的android目錄導(dǎo)入到Android Studio旺上，讓Android Studio工具幫你自動(dòng)構(gòu)建瓶蚂。

（5） RN默認(rèn)是用的gradle3.5構(gòu)建的，所以建議使用AS2.3.X版本（但是不能大于3.0.0版本）導(dǎo)入項(xiàng)目宣吱。我用的是AS3.1.3窃这，gradle構(gòu)建成功的，但是命令行執(zhí)行react-native run-android命令一直報(bào)各種錯(cuò)，問了別人也找不到解決方案杭攻，可能是RN對高版本的AS工具以及高版本的gradle不兼容吧祟敛。

（6）如果模擬器上運(yùn)行項(xiàng)目出現(xiàn)"Unable to load script from assets 'index.android.bundle'.Make sure your bundle is packaged correctly or you are running a package server."這樣的錯(cuò)誤怎么解決？

解決方式：
1.進(jìn)入\android\app\src\main目錄兆解，新建assets文件夾馆铁。
2.進(jìn)入項(xiàng)目根目錄cmd運(yùn)行以下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

（7）如果第四步的問題還沒有解決，建議使用以下方式創(chuàng)建和安裝應(yīng)用：（這個(gè)又是一種構(gòu)建方式锅睛，和rn有點(diǎn)區(qū)別埠巨，可以玩一下，但不建議學(xué)這個(gè)现拒。）

npm install -g create-react-native-app   這是安裝`create-react-native-app`命令工具
create-react-native-app 項(xiàng)目名   例如：create-react-native-app demo1
進(jìn)入項(xiàng)目根目錄辣垒，輸入`npm start`命令運(yùn)行（也可以試試yarn start）

（8）Unable to resolve module 'AccessibilityInfo'

react native版本問題，建議下載react-native 0.55.4版本印蔬，以及react-native-cli 1.2.0 版本勋桶，具體操作如下：
打開cmd命令行，逐個(gè)輸入以下命令：

npm uninstall -g react-native-cli
npm install react-native@0.55.4
npm install -g react-native-cli@1.2.0

然后打開一個(gè)項(xiàng)目目錄侥猬，打開cmd命令行輸入以下命令創(chuàng)建工程：

react-native init --version="0.55.4" 項(xiàng)目名

（9）Invariant Violation:Applicaction 你的項(xiàng)目名稱 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.

錯(cuò)誤如圖所示：

這個(gè)問題一般是配置的問題例驹，解決方式如下，確保registerComponent(參數(shù)1)和getMainComponentName()返回值這兩個(gè)保持一致就OK：

根路徑里面的index.js文件打開退唠，請看AppRegistry.registerComponent('rn_demo', () => App); 我這里括號(hào)內(nèi)參數(shù)1為rn_demo鹃锈，和項(xiàng)目根路徑名稱是一致的。

打開目錄/android/app/src/main/java/com/項(xiàng)目名/MainActivity.java铜邮，找到getMainComponentName()方法仪召，我這里返回的是rn_demo1寨蹋，事實(shí)上我項(xiàng)目根路徑名字叫做rn_demo松蒜。我只需要改成rn_demo就好了。

    @Override
    protected String getMainComponentName() {
        return "rn_demo1";
    }