随便说说：最近因为工作需要，接触了不少新技术，但 RN 还是没有坚持下来，主要是因为没有机会运用到日常工作吧。有一段时间没再写博客了，一部分原因是工作比较忙，但主要原因还是自己不够坚持，自己也说不上来为什么重新开始写博客，但是能写点什么还是挺开心的。发现草稿里面还躺着这么一篇半成品，想想还是发出来，不然过段时间会被自己删掉~ 不管写的好与不好，还是要尊重自己曾经的劳动成果 ^_^

笔者目前从事 iOS 开发，会使用 Python 开发一些爬虫和小工具，希望能通过学习 RN 实现以下目标：

  • 转向跨平台开发
  • 掌握 ES6 语法
  • 熟悉 React 框架

作为一名 iOS 攻城狮，深受 iOS 开发简单入门的荼毒，深切感受到 RN 的入门的不友好，谨以此文纪念填坑之旅。

为了能快速入门，少走弯路，笔者买了本 RN 的入门书籍 —— 《React Native 跨平台移动应用开发》，读者肯定懂得 IT 书籍一般都比较贵，买书之前的调研是少不了的，作为对比的还有另外一本国产书籍《React Native 入门与实战》，相对来说《React Native 跨平台移动应用开发》在网上的好评和推荐多一些，所以笔者入手了。目前翻了 1/3，内容好不好作为初学者就不评价了，需要吐槽的是并没有达到笔者入手的初衷，问题出在开发环境的搭建、Android 设备的真机联调部分，笔者为了在小米手机上运行第一个 Demo 花了3天多。有一部分原因是业余时间不多，但开发环境篇和 Android 真机联调部分，真的写的不够清楚，最终还是靠 Google 大法。

开发环境

RN 开发可以在 Mac 或者 Window 环境下进行，因笔者使用 Mac，本文不介绍 Window 开发环境。

RN 开发需要使用到下面的工具，本文不介绍安装 Homebrew 和切换国内镜像源的方法，读者有需要自行 Google。其中 Xcode 用于编译 iOS 版本，jdk 和 android-sdk 用于编译 Android 版本。

  • Homebrew
  • nodejs
  • react-native
  • Xcode
  • jdk
  • android-sdk
  • 推荐工具

nodejs

在官网 https://nodejs.org/en/ 下载最新的稳定版本，也可以通过 brew 安装 nodejs

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

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

安装完 nodejs，可以使用 n 模块管理 nodejs 的版本，操作简单，不过下载版本的速度比较慢，还不知道怎么安装下载好的 nodejs，除了这个问题，个人认为 n 命令还是很好用的。nodejs 还有另外一个版本管理工具 NVM，有兴趣的读者可以自行了解。

安装 n

npm install -g n

n 命令

n latest                       Install or activate the latest node release
n stable                       Install or activate the latest stable node release
n <version>                    Install node <version>
n use <version> [args ...]     Execute node <version> with [args ...]
n bin <version>                Output bin path for <version>
n rm <version ...>             Remove the given version(s)
n --latest                     Output the latest node version available
n --stable                     Output the latest stable node version available
n ls                           Output the versions of node available

react-native

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

如果你看到EACCES: permission denied这样的权限报错，需要修复/usr/local目录的所有权：

sudo chown -R `whoami` /usr/local

Xcode

从 AppStore 下载最新版本 Xcode，下载完成后运行 Xcode，同意协议，等待模块安装完成即可。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在 Xcode | Preferences | Locations 菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

jdk

安装 1.8 或更高版本的 jdk，如果已经安装了 jdk，可以通过 javac -version 命令查看当前安装的版本。

android-sdk

可以使用 Android Studio 来管理 android-sdk 和 Android 工程，也可以使用 brew install android-sdk 安装 android-sdk，笔者目前选择后者，以后有需要再使用 Android Studio。

android-sdk 安装完成之后，需要确保ANDROID_HOME环境变量正确地指向了 android-sdk 安装路径，也就是把下面的命令添加到 ~/.bash_profile 文件

export ANDROID_HOME=/usr/local/opt/android-sdk

然后使用下列命令使其立即生效（否则重启后才生效）：

source ~/.bash_profile

启动一个新的 shell 并且运行 android，在出现窗口中勾选：

  • Tools > Android SDK Build-tools 23.0.1
  • Android 6.0(API 23) > SDK Platform 23
  • Android 6.0(API 23) > Google APIs
  • Extras > Android Support Repository

如果需要运行模拟器，还要勾选xxx System Image，视开发设备的性能而定吧，笔者运行过 Android 的模拟器，实在卡的不行，果断放弃，后文也只介绍 Android 的真机联调方法。

选完之后点击 Install Packages，等待安装完成。

推荐工具

  • Watchman

Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman
  • Flow

Flow 是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个 flow 工具的语法。这一语法并不属于 ES 标准，只是 Facebook 自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习 flow 相关语法）。

brew install flow

IDE

编码工具可以选择 Sublime Text 3、Nuclide 或 WebStorm。

其中 Nuclide是由 Facebook 提供的基于 atom 的集成开发环境，可用于编写、运行和调试 React Native 应用，点击这里阅读 Nuclide 的入门文档。

网上很多人说 Nuclide 性能不好，笔者也比较习惯使用 ST3，就先上手试试，ST3 配置环境比 atom 麻烦不少，还没有达到满意的程度，此处先略过，后续再补上。

创建和运行项目

初始化项目

打开命令行窗口，进入项目父目录，执行命令：

react-native init <YourProjectName>

第一次创建项目比较耗时，因为要下载一些依赖项目，之后就会好很多。

运行在 iOS 模拟器

打开 ProjectDir/ios 目录下的 iOS 工程文件，在 Xcode 左上角选择运行的模拟器，之后点击运行，编译完成后会自动运行 iOS 模拟器并运行项目。

iOS 模拟器可以通过 Command+D 打开 RN 调试菜单。

So easy.

如果不想运行 Xcode，还可以使用命令行运行项目：

react-native run-ios

默认运行在模拟器，命令帮助：

$ react-native run-ios --help

  react-native run-ios [options]
  builds your app and starts it on iOS simulator

  Options:

    -h, --help                output usage information
    --simulator [string]      Explicitly set simulator to use
    --configuration [string]  Explicitly set the scheme configuration to use
    --scheme [string]         Explicitly set Xcode scheme to use
    --project-path [string]   Path relative to project root where the Xcode project (.xcodeproj) lives. The default is 'ios'.
    --device [string]         Explicitly set device to use by name.  The value is not required if you have a single device connected.
    --udid [string]           Explicitly set device to use by udid
    --config [string]         Path to the CLI configuration file

  Example usage:

    Run on a different simulator, e.g. iPhone 5:
    react-native run-ios --simulator "iPhone 5"

    Pass a non-standard location of iOS directory:
    react-native run-ios --project-path "./app/ios"

    Run on a connected device, e.g. Max's iPhone:
    react-native run-ios --device 'Max's iPhone'

运行在 iOS 真机

打开方式同上，不同的 RN 版本支持 iOS 真机联调的方式并不一样，运行在真机上以后根据界面提示做调整就好，一般问题不大，需要注意的是 Mac 和 iPhone 需要连接在同一局域网内，iPhone/iPad可以通过摇晃设备打开 RN 调试菜单。

运行在 Android 真机

如果是第一次运行 Android 版本，需要升级 Android SDK 的编译文件，以后初始化其他项目时不需要重复该操作。在命令行窗口，进入项目目录，执行命令：

npm install -g react-native-git-upgrade
react-native-git-upgrade

Android 手机虽然都使用 Android OS，但各大手机厂商都对操作系统进行了深度定制，不同机型的调试方式会略有不同，笔者使用红米 Note3 | Miui 8.1 | Android 5.0.2 测试，如果下面的联调方案不满足读者的需求，就需要读者自行攻克了。

首先打开手机的开发者模式，小米手机的做法是进入设置-关于手机，连续点击 MIUI 版本号 7 次，会出现开启开发者模式的提示，之后进入设置-更多设置-开发者选项，开启开发者选项，开启 USB 调试。

参考