1.創(chuàng)建模板工程
經(jīng)過上一篇講解了 React Native 開發(fā)平臺(tái)的環(huán)境搭建，我們接下來要講的是讓我們一起創(chuàng)建第一個(gè)React Native應(yīng)用,我們接下來在終端使用命令行創(chuàng)建我們的第一個(gè)新的應(yīng)用。他會(huì)生成一個(gè)包含React Native、iOS 和Android的全新模板工程。
1. cd ~路徑。
2.react-native init FirstProject
成功創(chuàng)建之后的項(xiàng)目有哪些文件如 圖(1).1
圖中 ios/ 和android/ 文件目錄包含了各自平臺(tái)的相關(guān)開發(fā)模板，index.ios.js 、 index.android.js 分別是各自平臺(tái)的入口文件，通過npm安裝的依賴文件通常會(huì)被放在 node_modules/目錄下。
2.在iOS平臺(tái)運(yùn)行React Native 應(yīng)用
如果你是一名iOS開發(fā)者那么這一步，想必創(chuàng)建完項(xiàng)目第一時(shí)間會(huì)打開iOS文件運(yùn)行一把，內(nèi)心小激動(dòng)。
用Xcode 打開FirstProject.xcodeproj 文件，你會(huì)發(fā)現(xiàn)有一個(gè)運(yùn)行的按鈕，如圖(2).1
我們現(xiàn)在選擇的是iPhone 6模擬器 ,點(diǎn)擊運(yùn)行如圖(2).2
React Native的iOS項(xiàng)目在編譯時(shí)會(huì)先運(yùn)行一個(gè)shell腳本，其作用有兩個(gè)：從Terminal啟動(dòng)了一個(gè)Node.js的server用于React Native調(diào)試將React Native的資源文件打包放在編譯目錄下。 包管理器就緒之后，iOS模擬器運(yùn)行默認(rèn)的應(yīng)用程序，一切運(yùn)行順利的話將會(huì)出現(xiàn)我們期待已久的iOS模擬器 如圖(2).3
我們?cè)诰帉戇^程中，想要查看效果的時(shí)候不需要我們每次運(yùn)行，我們只需要選中模擬器 Cmd + R 就可以，但是需要保證包管理器一直處于運(yùn)行狀態(tài)，如果管理器奔潰退出了，可以通過終端啟動(dòng)。
cd ~工程路徑
npm start?? 啟動(dòng)包管理器
2.1 部署到iOS 設(shè)備(真機(jī)調(diào)試)
前面一篇中我們講到了怎么在ios 開發(fā)中需要用到開發(fā)者賬號(hào)，我們真機(jī)調(diào)試需要用到開發(fā)者賬號(hào)，在https://developer.apple.com/account/ios/certificate/? 注冊(cè)我們的APPID 如圖(2.1).1，創(chuàng)建的app id? 為com.rn.rnapp
接下來我們需要把我們的真機(jī)通過鏈接數(shù)據(jù)線 iTunes獲取到手機(jī)的UDID，添加到我們的開發(fā)者賬號(hào)中，如圖 (2.1).2
然后創(chuàng)建我們的測(cè)試證書和配置文件如圖 (2.1).3? 然后一步步往下操作? 圖(2.1).4
創(chuàng)建完證書，下載完畢雙擊打開證書和配置文件，它們分別會(huì)拷貝到Xcode 和鑰匙串中，我們?cè)赬code中可以選擇我們剛剛創(chuàng)建的證書和配置文件 如圖(2.1).5 再次選擇真機(jī)就可以運(yùn)行到手機(jī)上，以便于我們真機(jī)調(diào)試。
3.在Android 平臺(tái)運(yùn)行React Native應(yīng)用
在Android 平臺(tái)運(yùn)行React Native應(yīng)用，首先講解下安卓模擬器的安裝步驟?
需要做兩件事：
1.打開模擬器。
2.運(yùn)行程序。
之前我們?cè)诘谝黄h(huán)境搭建中講到運(yùn)行AVD 管理的方法
android avd?????? //選擇模擬器 然后點(diǎn)擊Start... 按鈕
另外，也可以通過命令行運(yùn)行模擬器，顯示所有可用的模擬器類型：
emulator -list-avds
然后我們通過名字和@前綴來運(yùn)行它們，例如：模擬器名字：testandroid? 我可以這樣運(yùn)行它：
emulator @testandroid然后只需要在工程的跟目錄運(yùn)行：
react-native run-android
3.1 安卓真機(jī)運(yùn)行React Native.應(yīng)用
吐槽：在寫這一篇博客之前，我運(yùn)行安卓程序的時(shí)候，出現(xiàn)了各種錯(cuò)誤。1.首先把我的紅米手機(jī)調(diào)成開發(fā)者狀態(tài)，由于本人沒有做過安卓開發(fā)，這么簡(jiǎn)單的問題，硬是找了半天的問題。2.比如gradle 版本過低，需要下載新的grale新版本，搞了半天好不容易安裝成功。
使用數(shù)據(jù)線連上真機(jī).在根目錄中直接使用命令
react-native run-android
真機(jī)運(yùn)行結(jié)果如圖(3.1).1
注：如果真機(jī)測(cè)試，安裝一次程序，如果有修改，就不需要每次插上數(shù)據(jù)線重新運(yùn)行，但是首先你要做這幾步:
第一步：需要你的電腦的鏈接的網(wǎng)絡(luò)跟真機(jī)鏈接的網(wǎng)絡(luò)一致，然后在程序里設(shè)置你電腦的IP 地址 首先搖一搖出現(xiàn)如圖(3.1).2 選擇 Dev Settings
設(shè)置IP地址圖(3.1).3
設(shè)置好以后 ，我們修改下我們的小程序。比如我們把Welcome to React Native! 修改成Welcome to BeiJing我們?cè)俅螕u一搖 出現(xiàn) 圖(3.1).2 我們選擇第一個(gè)選項(xiàng) Reload 刷新下，出現(xiàn) 如圖(3.1).4界面刷新程序。
效果如圖(3.1).5
有了這種逆天的功能我們就可以做熱更新。
關(guān)于React Native創(chuàng)建第一個(gè)應(yīng)用講到這里已經(jīng)結(jié)束了。我也是第一次嘗試去做，其中也遇到了很多錯(cuò)誤，如果有不明白的地方，可以給我留言，或者給我發(fā)私信 我的QQ：963201050，大家一起探討。
補(bǔ)充 ：Facebook推薦第三方安卓模擬器 Genymotion 下載：https://www.genymotion.com/download/
