版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
PS:轉(zhuǎn)載請(qǐng)注明出處
作者: TigerChain
地址: http://www.reibang.com/p/62d37fdbedbb
本文出自 TigerChain 簡(jiǎn)書 ReactNative 系列
教程簡(jiǎn)介
- 1傲宜、閱讀對(duì)象
本篇教程適合新手閱讀，老手直接略過(guò)
-
2讯屈、教程難度
初級(jí)
我們知道 ReactNative 的綜旨是：Learn Once , Write anywhere蛋哭，有道是：工欲善其事，必先利其器涮母，要學(xué)習(xí) RN ,首先我們就要把環(huán)境搭建起來(lái)谆趾，廢話不多說(shuō)我們直接進(jìn)入正題
一、 環(huán)境搭建「以下是針對(duì) Android 環(huán)境」
1叛本、Windows 環(huán)境下安裝
安裝依賴
我們要安裝 node python2 JDK 和 AndroidStudio
1沪蓬、安裝 node python 和 JDK
有兩種安裝方法，快速方法「方法2」和常規(guī)方法「方法1」
方法1：
我們分別去 JDK Node 和 python 官方幾網(wǎng)站把對(duì)應(yīng)的包下載下來(lái)進(jìn)行安裝来候，然后配置環(huán)境變量即可跷叉，我在 windows 上面使用的是此方法安裝的
方法2：
官方推薦使用 Chocolatey「windows 下的非常流行包管理器」來(lái)安裝 node python 和 JDK
PS:安裝 chocolatey 有幾個(gè)前提：
1、windows 系統(tǒng)必須是 Windows 7+ / Windows Server 2003+
2营搅、Powershell 要是 v2 以上的版本：
Powershell 是運(yùn)行在windows機(jī)器上實(shí)現(xiàn)系統(tǒng)和應(yīng)用程序管理自動(dòng)化的命令行腳本環(huán)境云挟，可以看成是替代 md.exe 的
3、windows 系統(tǒng)必須是安裝 .NET Framework 4+ 以上的版本
1转质、假使你安裝好了 chocolatey 园欣，可以根據(jù)官網(wǎng) https://chocolatey.org/ 里面的 install 去安裝「由于我這里是 mac 系統(tǒng)就不多做說(shuō)明了」
2、chocolatey 安裝以后休蟹，我們就可以在命令行中安裝 node 和 python2 了,使用 choco install 命令
choco install -y nodejs.install python2 jdk8
確保我們安裝的 node 是 4 或以上的版本沸枯，java 是 8 或以上版本
2、安裝 React Native 命令行界面「cli」
這里我們使用 npm 來(lái)安裝赂弓，如果你安裝了 node 就會(huì)自帶绑榴，這里我們?nèi)职惭b
npm install -g yarn react-native-cli
3、安裝 AndroidStudio「簡(jiǎn)稱 AS」
1盈魁、下載 AS 下載地址：https://developer.android.google.cn/studio/index.html「Google 對(duì)中國(guó)開放了開發(fā)者網(wǎng)站翔怎，可以下載，不存在墻的問(wèn)題」
2杨耙、安裝 AS
安裝 AS 過(guò)程請(qǐng)不要隨意改動(dòng) AS 的選項(xiàng)赤套，默認(rèn)使用 SDK 是最新的，RN 需要至少是 Android 6.0 的 SDK按脚，所以默認(rèn)安裝的沒(méi)有問(wèn)題。
- 3敦冬、配置 AS 環(huán)境變量 ANDROID_HOME
ANDROID_HOME 指向了你安裝 Android SDK 的路徑辅搬，打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量 -> 新建，舉個(gè)例子，下圖的路徑可能你本機(jī)的不一樣堪遂，請(qǐng)根據(jù)本機(jī)的地址設(shè)置
2介蛉、Mac 環(huán)境下安裝
安裝依賴
在 mac 安裝我們需要安裝一些依賴-- node、Watchman溶褪、React Native 的命令行工具币旧、JDK 和 AndroidStudio
1、安裝 Homebrew
打開命令行并輸入：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2猿妈、使用 brew 安裝 node 和 watchman
brew install node
brew install watchman
3吹菱、安裝 react native 命令行工具
npm install -g yarn react-native-cli
4、下載安裝 JDK 彭则、Android Studio
此步驟和 Windows 上安裝是一樣的鳍刷，就是配置 ANDROID_HOME 有點(diǎn)不一樣「mac 上環(huán)境變量的配置」
打開 $HOME/.bash_profile 文件 或是 .zshrc 文件，輸入以下內(nèi)容
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
以上就完成了 RN 的安裝俯抖，按照官網(wǎng)步驟一步步來(lái)就可以了输瓜。
二、測(cè)試環(huán)境
在上面我們搭建好了 RN 的環(huán)境芬萍，我們來(lái)測(cè)試一下尤揣，打開終端輸入：react-native --version 就會(huì)有以下信息
react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
這里說(shuō)明我們安裝好了 RN 。
創(chuàng)建項(xiàng)目
1柬祠、創(chuàng)建 RN 項(xiàng)目的命令「在終端中使用」：
react-native init 項(xiàng)目名稱
2北戏、新建一個(gè)項(xiàng)目
在這里我們直接創(chuàng)建一個(gè)項(xiàng)目的來(lái)直觀的感受一下吧
- 1、在指定目錄「我這里在桌面」新建 myfirstdemo
react-native init myfirstdemo
如下圖所示「部分截圖」：
... 省略部分截圖
我們可以看到成功的創(chuàng)建了一個(gè)項(xiàng)目瓶盛，可以使用 react-native run-android 或 react-native run-ios 運(yùn)行項(xiàng)目了最欠，在這里我們運(yùn)行 Android 項(xiàng)目
- 2、運(yùn)行項(xiàng)目
2.1 打開模擬器
首先惩猫，要打開模擬器芝硬，或是連接上真機(jī)「真機(jī)上會(huì)有坑」，我們先連接模擬器轧房，運(yùn)行一下「這里使用 genymotion」
我們打開 genymotion
2.2 運(yùn)行項(xiàng)目
我們運(yùn)行 react-native run-android拌阴，會(huì)出現(xiàn)以下命令，就是下載一些依賴包
過(guò)了一會(huì)作界面出來(lái)了
我肋個(gè) ** 什么情況奶镶，既然掛了「大概意思就是說(shuō)運(yùn)行 assets 包是否正確或服務(wù)是否開啟」迟赃，不怕，我們來(lái)解決厂镇，具體來(lái)說(shuō)三個(gè)步驟搞定
首先纤壁，我這里服務(wù)肯定是運(yùn)行的，那么就可能是包有問(wèn)題了捺信，果不其然進(jìn)入到 android 項(xiàng)目中酌媒，沒(méi)有 assets 文件夾，如下圖：
確實(shí)沒(méi)有 assets 文件夾，我們按如下步驟進(jìn)行：
- (1)秒咨、項(xiàng)目目錄中使用 mkdir android/app/src/main/assets 創(chuàng)建 assets 目錄
- (2)喇辽、運(yùn)行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
- 3、執(zhí)行 react-native run-android 即可
除了以上方法雨席，還可以在 package.json 中去配置菩咨，具體解決辦案可以看 這里
經(jīng)過(guò)以上步驟，我們運(yùn)行了 react-native run-android 就可以看到我們第一個(gè) RN 項(xiàng)目了陡厘，不容易呀「內(nèi)心有沒(méi)有小竊喜呀!!!」
對(duì)于 IOS 的環(huán)境抽米，我們可以的看 RN 的中文網(wǎng) ，當(dāng)然英文基礎(chǔ)好的話雏亚，建議看官網(wǎng)文檔缨硝。
到此為止，我們就完成了 RN 環(huán)境的搭建罢低，下一節(jié)我們正式開始 RN 之旅吧
