上一篇教程我們一步步配置了開發(fā)RN的必備環(huán)境，這篇文章我們依然配置環(huán)境，昨天配置的是CRNA模式開發(fā)的環(huán)境，我們今天配置原生混合開發(fā)環(huán)境。

第一次寫系列教程，寫的不好，多多擔(dān)待，有錯(cuò)誤歡迎評判指正。

說一下這個(gè)系列教程的目標(biāo)吧，實(shí)戰(zhàn)一個(gè)CRNA模式開發(fā)的跨平臺(tái)App打包并發(fā)布，并將這個(gè)App用原生混合開模式實(shí)現(xiàn)并打包發(fā)布。

廢話不多說開始擼碼，你準(zhǔn)備好了嗎？

環(huán)境配置

配置原生混合模式開發(fā)的環(huán)境，我們參考官網(wǎng)，官網(wǎng)介紹的比較詳細(xì)。

1.安裝 Chocolatey

Chocolatey 是window上的一個(gè)打包工具，可以通過choco xxxxx命令下載安裝一些軟件，點(diǎn)擊這里進(jìn)行下載chocolatey

第一步用管理員身份打開你的dos（命令行工具）

之后在chocolatey官網(wǎng)上拷貝命令，粘貼在這里，回車，之后等一會(huì)就會(huì)在你的windows上安裝好choco

復(fù)制這個(gè)命令在剛才管理員身份運(yùn)行的控制臺(tái)上

中途會(huì)出現(xiàn)幾個(gè)警告，時(shí)長大約需要2分鐘，

choco -v 看一下我們的版本，?? 安裝成功！

官網(wǎng)上說需要安裝python ，我印象中是不安裝也可以，之后你可以用choco xxx命令一次安裝python node yarn jdk8等必要的東西，

這些東西，在上一片文章配置的時(shí)候已經(jīng)裝了大部分，在上篇文章我們沒有安裝 jdk 和Android studio，這里大家就參考官網(wǎng)安裝吧，下面我會(huì)做一些配置上的問題，

RN中文官網(wǎng)

Yarn、React Native的命令行工具（react-native-cli）

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

npm install -g yarn react-native-cli

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

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

    如果你遇到EACCES: permission denied權(quán)限錯(cuò)誤，可以嘗試運(yùn)行下面的命令（限linux系統(tǒng)）： sudo npm install -g yarn react-native-cli.

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

Android Studio

React Native目前需要Android Studio2.0或更高版本。

    Android Studio需要Java Development Kit [JDK] 1.8（暫不支持更高版本）。你可以在命令行中輸入 javac -version來查看你當(dāng)前安裝的JDK版本。如果版本不合要求，則可以到 官網(wǎng)上下載。

或是使用包管理器來安裝（比如choco install jdk8或是 apt-get install default-jdk）

Android Studio包含了運(yùn)行和測試React Native應(yīng)用所需的Android SDK和模擬器。

    除非特別注明，請不要改動(dòng)安裝過程中的選項(xiàng)。比如Android Studio默認(rèn)安裝了 Android Support Repository，而這也是React Native必須的（否則在react-native run-android時(shí)會(huì)報(bào)appcompat-v7包找不到的錯(cuò)誤）。

    確定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。

    在初步安裝完成后，選擇Custom安裝項(xiàng)：

custom installation

    檢查已安裝的組件，尤其是模擬器和HAXM加速驅(qū)動(dòng)。

verify installs

    安裝完成后，在Android Studio的歡迎界面中選擇Configure | SDK Manager。

configure sdk

    在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。

platforms

    在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個(gè)版本。當(dāng)然如果其他插件需要其他版本，你可以同時(shí)安裝其他多個(gè)版本）。然后還要勾選最底部的Android Support Repository.

build tools

ANDROID_HOME環(huán)境變量

確保ANDROID_HOME環(huán)境變量正確地指向了你安裝的Android SDK的路徑。

打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量 -> 新建

    具體的路徑可能和下圖不一致，請自行確認(rèn)。

env variable

    你需要關(guān)閉現(xiàn)有的命令符提示窗口然后重新打開，這樣新的環(huán)境變量才能生效。

將Android SDK的Tools目錄添加到PATH變量中#

你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中，以便在終端中運(yùn)行一些Android工具，例如android avd或是adb logcat等。

打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量 -> 選中PATH -> 雙擊進(jìn)行編輯

    注意你的具體路徑可能和下圖不同

 測試安裝

react-native init myapp

這個(gè)過程不要懷疑時(shí)間，因?yàn)榘惭b這個(gè)真的很慢很慢

這樣就算完成了，我等了足夠十分鐘，記得當(dāng)年第一次弄的時(shí)候，等了30分鐘！ 現(xiàn)在我們切換目錄進(jìn)入項(xiàng)目，
cd myaapp

react-native run-android

這個(gè)過程中會(huì)打開Node編譯器加載解析綁定，過程也比較漫長情耐心等待！

這個(gè)過程我踩的坑比較多，主要涉及到兩個(gè)方面：

1.配置JAVA_HOME  把路徑寫錯(cuò)，導(dǎo)致各種莫名其妙的問題

2.配置ANDROID_HOME 把名字寫錯(cuò)，導(dǎo)致各種錯(cuò)誤

3.用夜神模擬器測試，運(yùn)行項(xiàng)目跑不起來，原因adb沒有鏈接上模擬器

 adb鏈接模擬器：夜神端口請用【62001】我在端口處踩過坑！

4.項(xiàng)目跑起來后報(bào)解析錯(cuò)誤的紅屏

 關(guān)于 紅屏這個(gè)問題，我在另一篇文章中介紹：react native中Unable to load script from assets 'index.android.bundle'解決方案

新手一般也就會(huì)遇到這幾個(gè)問題了吧，今天我把遇到的坑都羅列一下，希望可以對部分人起到幫助！

    提示：你可以使用--version參數(shù)創(chuàng)建指定版本的項(xiàng)目。例如react-native init myapp--version 0.44.3。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)。

Windows用戶請注意，請不要在命令行默認(rèn)的System32目錄中init項(xiàng)目！會(huì)有各種權(quán)限限制導(dǎo)致不能運(yùn)行！

補(bǔ)充一個(gè)問題：

項(xiàng)目跑起來后，按 pagedown 刷新的時(shí)候，也會(huì)報(bào)錯(cuò)，這是應(yīng)為你還么有配置夜神

 如何配置，看這里

好了，這個(gè)問題就解決了

下一篇文章講一些基礎(chǔ)，之后實(shí)戰(zhàn)一個(gè)CRNA項(xiàng)目實(shí)戰(zhàn)一個(gè)原生混合開的項(xiàng)目！

后續(xù)文章持續(xù)更新，敬請期待！

文章為作者原創(chuàng)，轉(zhuǎn)載請注明出處。如果覺得對你有幫助，請推薦一下！