創(chuàng)建 React Native 應(yīng)用
當(dāng)我們在此課程中構(gòu)建應(yīng)用時跃闹，我們要面向 Android 和 iOS 兩個平臺構(gòu)建。那么我們面臨的一個難題是磷雇，我們需要支持兩個獨(dú)立的開發(fā)環(huán)境：iOS 使用 Xcode偿警，Android 使用 Android Studio。這為學(xué)習(xí)本課程中帶來了很多復(fù)雜性唯笙；畢竟螟蒸，Xcode 和 Android Studio 都可以成為單獨(dú)的一套課程！
幸運(yùn)的是崩掘，現(xiàn)在我們有一種新工具可以使用七嫌，使我們可以面向 Android 和 iOS 進(jìn)行開發(fā)，而無需打開 Android Studio 或 Xcode苞慢。這個工具的名字非常直白诵原，叫做 Create React Native App。它類似于 Create React App挽放，因?yàn)槟阈枰龅氖峭ㄟ^ NPM 安裝 CLI绍赛。然后，通過 CLI辑畦，你可以輕松地構(gòu)建起一個全新的 React Native 項(xiàng)目吗蚌。
跟 Create React App 一樣，使用 Create React Native App (CRNA) 有優(yōu)點(diǎn)也有缺點(diǎn)纯出。首先來說優(yōu)點(diǎn)蚯妇。
Create React Native App 優(yōu)點(diǎn)
比較明顯的一個是 Create React Native App 最大限度地減少了創(chuàng)建 "hello world" 應(yīng)用程序所需的時間。事實(shí)上暂筝，你可以在終端上運(yùn)行一個命令箩言，15 秒鐘后，一個使用 JavaScript 在 Android 和 iOS 上都可以運(yùn)行的項(xiàng)目就誕生了焕襟，這簡直不可思議分扎。接下來，Create React Native App 還允許你輕松地在自己的設(shè)備上進(jìn)行開發(fā)胧洒，這一點(diǎn)我們稍后深入了解畏吓。這樣墨状，你在文本編輯器中所做的任何更改將立即顯示在本地手機(jī)上運(yùn)行的應(yīng)用中。然后菲饼，（這一點(diǎn)我之前提到過）肾砂，使用 Create React Native App，你只需要這一個構(gòu)建工具就夠了宏悦。你不必?fù)?dān)心 Xcode 或 Android Studio镐确。最后一點(diǎn)，此工具沒有鎖定饼煞。就像 Create React App 一樣源葫，你可以隨時"彈出配置（eject）"。
Create React Native 缺點(diǎn)
此工具還存在一些缺點(diǎn)砖瞧，雖然都比較小息堂，但也值得注意。首先块促，如果你在構(gòu)建一個要添加到現(xiàn)有原生 iOS 或 Android 應(yīng)用的應(yīng)用荣堰，Create React Native App 就無法用了。第二竭翠，如果你需要在 React Native 和一些 Create React Native App 不認(rèn)識的原生 API 之間建立橋接（這非常罕見）振坚，Create React Native App 就無法正常工作了。
我們來看看吧斋扰！
安裝 Create React Native App
為了使用 Create React Native App渡八，請先在全局安裝它:
npm install -g create-react-native-app
或者也可以使用 yarn（訪問此處 了解安裝說明）：
yarn global add create-react-native-app
?? 使用 Yarn ??
Create React Native App 目前無法與 NPM v5 一起使用，因?yàn)?a target="_blank" rel="nofollow">NPM 中存在錯誤传货。雖然 NPM v3 或 v4 應(yīng)該沒有問題屎鳍，但是保險起見，后面我們都使用 Yarn损离。
Expo
Expo 是一項(xiàng)服務(wù)哥艇，它能使涉及 React Native 的一切都變得非常容易绝编。Expo 背后的思路是省去 Android Studio 或 Xcode 的使用僻澎。更重要的是：它甚至允許我們使用 Windows（或甚至 Linux）面向 iOS 進(jìn)行開發(fā)！
使用 Expo十饥，你可以使用已經(jīng)熟悉的 JavaScript 加載和運(yùn)行由 Create React Native App 構(gòu)建的項(xiàng)目窟勃。你無需編譯任何原生代碼。而且像 Create React App 一樣逗堵，將 Expo 與 Create React Native App 一起使用秉氧，幾乎不用什么配置就可以使我們開始運(yùn)行應(yīng)用。
在此課程中蜒秤，我們將大量依賴 Expo汁咏。首先: 你需要安裝 Expo亚斋。請前往應(yīng)用商店，安裝適合你的設(shè)備的 Expo 移動應(yīng)用：
- Google Play 上的 Expo (Android)
- App Store 上的 Expo (iOS)
Simulators
結(jié)合 Expo 與 Create React Native App 是構(gòu)建應(yīng)用的最快速方式攘滩，但也有其他構(gòu)建項(xiàng)目的方式帅刊。如果你想將 React Native 集成到現(xiàn)有應(yīng)用中，或者如果你已從 Create React Native App 彈出應(yīng)用漂问，可自行參考 React Native 文檔中的使用原生代碼構(gòu)建項(xiàng)目 選項(xiàng)卡赖瞒。本指南還設(shè)置了 iOS 和 Android 模擬器，以便你可以直接在自己的電腦上欣賞自己的移動應(yīng)用蚤假！我們將在此課程中使用 iOS 和 Android 模擬器進(jìn)行演示栏饮，但在入門階段不強(qiáng)制要求。
?? Bundling Error（Unexpected Token）??
如果你在嘗試運(yùn)行模擬器時遇到打包錯誤磷仰，請嘗試將 React Native 的 Babel 預(yù)設(shè)更改為版本
2.1.0袍嬉。然后，刪除你的node-modules目錄芒划，用npm install重新安裝冬竟，然后再次運(yùn)行模擬器。更多信息民逼，請查看有關(guān) Stack Overflow 的此文章泵殴。
環(huán)境
在使用 Create React Native App 創(chuàng)建應(yīng)用時，你期望獲得什么類型的支持拼苍？
由于我們純粹使用 JavaScript 來構(gòu)建移動應(yīng)用，這個列表沒有什么好驚奇的疮鲫！由于 Create React Native App 隨 Babel 一起提供吆你，請自行查看支持的轉(zhuǎn)換 的完整列表。
在開始實(shí)際構(gòu)建應(yīng)用之前俊犯，有一些文件是項(xiàng)目所必需的妇多，但你不必完全理解。因此燕侠，我們只給你提供代碼者祖，感興趣的話可以看看。
所有這三個文件都將位于 utils 文件夾中绢彤。首先七问，在項(xiàng)目的根目錄下創(chuàng)建一個名為 utils 的文件夾。
接下來茫舶，你要在 utils 文件夾內(nèi)創(chuàng)建三個文件械巡。
colors.jshelpers.js-
_calendar.js（確保包含下劃線！）
將以下代碼粘貼到utils/colors.js文件中
// utils/colors.js
export const purple = '#292477'
export const gray = '#757575'
export const white = '#fff'
export const red = '#b71845'
export const orange = '#f26f28'
export const blue = '#4e4cb8'
export const lightPurp = '#7c53c3'
export const pink = '#b93fb3'
接下來，將以下代碼粘貼到 utils/helpers.js 中
// utils/helpers.js
export function isBetween (num, x, y) {
if (num >= x && num <= y) {
return true
}
return false
}
export function calculateDirection (heading) {
let direction = ''
if (isBetween(heading, 0, 22.5)) {
direction = 'North'
} else if (isBetween(heading, 22.5, 67.5)) {
direction = 'North East'
} else if (isBetween(heading, 67.5, 112.5)) {
direction = 'East'
} else if (isBetween(heading, 112.5, 157.5)) {
direction = 'South East'
} else if (isBetween(heading, 157.5, 202.5)) {
direction = 'South'
} else if (isBetween(heading, 202.5, 247.5)) {
direction = 'South West'
} else if (isBetween(heading, 247.5, 292.5)) {
direction = 'West'
} else if (isBetween(heading, 292.5, 337.5)) {
direction = 'North West'
} else if (isBetween(heading, 337.5, 360)) {
direction = 'North'
} else {
direction = 'Calculating'
}
return direction
}
export function timeToString (time = Date.now()) {
const date = new Date(time)
const todayUTC = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
return todayUTC.toISOString().split('T')[0]
}
最后讥耗，將以下代碼粘貼到 utils/_calendar.js 文件中有勾。
// utils/_calendar.js
import { AsyncStorage } from 'react-native'
import { getMetricMetaInfo, timeToString } from './helpers'
export const CALENDAR_STORAGE_KEY = 'UdaciFitness:calendar'
function getRandomNumber (max) {
return Math.floor(Math.random() * max) + 0
}
function setDummyData () {
const { run, bike, swim, sleep, eat } = getMetricMetaInfo()
let dummyData = {}
const timestamp = Date.now()
for (let i = -183; i < 0; i++) {
const time = timestamp + i * 24 * 60 * 60 * 1000
const strTime = timeToString(time)
dummyData[strTime] = getRandomNumber(3) % 2 === 0
? {
run: getRandomNumber(run.max),
bike: getRandomNumber(bike.max),
swim: getRandomNumber(swim.max),
sleep: getRandomNumber(sleep.max),
eat: getRandomNumber(eat.max),
}
: null
}
AsyncStorage.setItem(CALENDAR_STORAGE_KEY, JSON.stringify(dummyData))
return dummyData
}
function setMissingDates (dates) {
const length = Object.keys(dates).length
const timestamp = Date.now()
for (let i = -183; i < 0; i++) {
const time = timestamp + i * 24 * 60 * 60 * 1000
const strTime = timeToString(time)
if (typeof dates[strTime] === 'undefined') {
dates[strTime] = null
}
}
return dates
}
export function formatCalendarResults (results) {
return results === null
? setDummyData()
: setMissingDates(JSON.parse(results))
}
總結(jié)
Create React Native App 類似于 Create React App古程，在于它只需最少的配置便能構(gòu)建起始應(yīng)用程序:
- 花最少的"時間構(gòu)建起 'Hello World'"
- 在你自己的設(shè)備上通過 Expo 進(jìn)行開發(fā)
- 只需單個構(gòu)建工具
- 不鎖定（即隨時彈出）
你也可以設(shè)置模擬器來幫助開發(fā)柠衅。但無論我們選擇哪種開發(fā)平臺（iOS、Android）以及哪種環(huán)境（Mac籍琳、Windows菲宴、Linux）-- 我們完全在使用熟悉的舊 JavaScript 進(jìn)行構(gòu)建！
總結(jié)
React Native 開發(fā)好的一點(diǎn)在于它將你熟悉的 web 開發(fā)體驗(yàn)帶到了原生開發(fā)趋急。訪問應(yīng)用內(nèi)開發(fā)者菜單使你能夠重新加載 JavaScript 代碼喝峦，通過開發(fā)者工具進(jìn)行遠(yuǎn)程調(diào)試，甚至顯示應(yīng)用內(nèi)檢查器呜达。
調(diào)試
你只需晃動手機(jī)或:
在 iOS 模擬器中按下?D
在 Android 模擬器中按下 ?M
刷新
要刷新應(yīng)用谣蠢，只需:
雙擊鍵盤上的 “R”（如果你用的是模擬器）
晃動手機(jī)，然后選擇“刷新”
