ReactNative 开发环境设置

创建 React Native 应用

当我们在此课程中构建应用时，我们要面向 Android 和 iOS 两个平台构建。那么我们面临的一个难题是，我们需要支持两个独立的开发环境：iOS 使用 Xcode，Android 使用 Android Studio。这为学习本课程中带来了很多复杂性；毕竟，Xcode 和 Android Studio 都可以成为单独的一套课程！

幸运的是，现在我们有一种新工具可以使用，使我们可以面向 Android 和 iOS 进行开发，而无需打开 Android Studio 或 Xcode。这个工具的名字非常直白，叫做 Create React Native App。它类似于 Create React App，因为你需要做的是通过 NPM 安装 CLI。然后，通过 CLI，你可以轻松地构建起一个全新的 React Native 项目。

跟 Create React App 一样，使用 Create React Native App (CRNA) 有优点也有缺点。首先来说优点。

Create React Native App 优点

比较明显的一个是 Create React Native App 最大限度地减少了创建 "hello world" 应用程序所需的时间。事实上，你可以在终端上运行一个命令，15 秒钟后，一个使用 JavaScript 在 Android 和 iOS 上都可以运行的项目就诞生了，这简直不可思议。接下来，Create React Native App 还允许你轻松地在自己的设备上进行开发，这一点我们稍后深入了解。这样，你在文本编辑器中所做的任何更改将立即显示在本地手机上运行的应用中。然后，（这一点我之前提到过），使用 Create React Native App，你只需要这一个构建工具就够了。你不必担心 Xcode 或 Android Studio。最后一点，此工具没有锁定。就像 Create React App 一样，你可以随时"弹出配置（eject）"。

Create React Native 缺点

此工具还存在一些缺点，虽然都比较小，但也值得注意。首先，如果你在构建一个要添加到现有原生 iOS 或 Android 应用的应用，Create React Native App 就无法用了。第二，如果你需要在 React Native 和一些 Create React Native App 不认识的原生 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 一起使用，因为NPM 中存在错误。虽然 NPM v3 或 v4 应该没有问题，但是保险起见，后面我们都使用 Yarn。

Expo

Expo 是一项服务，它能使涉及 React Native 的一切都变得非常容易。Expo 背后的思路是省去 Android Studio 或 Xcode 的使用。更重要的是：它甚至允许我们使用 Windows（或甚至 Linux）面向 iOS 进行开发！

使用 Expo，你可以使用已经熟悉的 JavaScript 加载和运行由 Create React Native App 构建的项目。你无需编译任何原生代码。而且像 Create React App 一样，将 Expo 与 Create React Native App 一起使用，几乎不用什么配置就可以使我们开始运行应用。

在此课程中，我们将大量依赖 Expo。首先: 你需要安装 Expo。请前往应用商店，安装适合你的设备的 Expo 移动应用：

Google Play 上的 Expo (Android)
App Store 上的 Expo (iOS)

Simulators

结合 Expo 与 Create React Native App 是构建应用的最快速方式，但也有其他构建项目的方式。如果你想将 React Native 集成到现有应用中，或者如果你已从 Create React Native App 弹出应用，可自行参考 React Native 文档中的使用原生代码构建项目选项卡。本指南还设置了 iOS 和 Android 模拟器，以便你可以直接在自己的电脑上欣赏自己的移动应用！我们将在此课程中使用 iOS 和 Android 模拟器进行演示，但在入门阶段不强制要求。

Bundling Error（Unexpected Token）

如果你在尝试运行模拟器时遇到打包错误，请尝试将 React Native 的 Babel 预设更改为版本 2.1.0。然后，删除你的 node-modules 目录，用 npm install 重新安装，然后再次运行模拟器。更多信息，请查看有关 Stack Overflow 的此文章。

环境

在使用 Create React Native App 创建应用时，你期望获得什么类型的支持？

ES5 和 ES6 支持
对象展开运算符
异步函数
JSX（毕竟这是React！）
Flow
Fetch

由于我们纯粹使用 JavaScript 来构建移动应用，这个列表没有什么好惊奇的！由于 Create React Native App 随 Babel 一起提供，请自行查看支持的转换的完整列表。

在开始实际构建应用之前，有一些文件是项目所必需的，但你不必完全理解。因此，我们只给你提供代码，感兴趣的话可以看看。

所有这三个文件都将位于 utils 文件夹中。首先，在项目的根目录下创建一个名为 utils 的文件夹。

接下来，你要在 utils 文件夹内创建三个文件。

colors.js
helpers.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))
}

这是包含在 utils 文件夹中所做更改的提交。

总结

Create React Native App 类似于 Create React App，在于它只需最少的配置便能构建起始应用程序:

花最少的"时间构建起 'Hello World'"
在你自己的设备上通过 Expo 进行开发
只需单个构建工具
不锁定（即随时弹出）

你也可以设置模拟器来帮助开发。但无论我们选择哪种开发平台（iOS、Android）以及哪种环境（Mac、Windows、Linux）-- 我们完全在使用熟悉的旧 JavaScript 进行构建！

总结

React Native 开发好的一点在于它将你熟悉的 web 开发体验带到了原生开发。访问应用内开发者菜单使你能够重新加载 JavaScript 代码，通过开发者工具进行远程调试，甚至显示应用内检查器。

调试

你只需晃动手机或:

在 iOS 模拟器中按下⌘D
在 Android 模拟器中按下 ⌘M

刷新

要刷新应用，只需:

双击键盘上的 “R”（如果你用的是模拟器）
晃动手机，然后选择“刷新”