时代背景

2015.03 React Native iOS 发布
2015.09 React Native Android 发布
APP中使用Hybrid已成为当前主流
有追求的APP Developer理应学习Facebook出品的React Native

从何而来

本文参考：React Native Get Started

环境要求

  • Mac OS X（有条件的最好使用Mac）
  • VPN，可以使用ShadowSocks。
  • HomeBrew，开发iOS的小伙伴肯定已经有了，没有的小伙伴请移步：HomeBrew官网

  • Node.js，请使用4.0以上的版本，node -v可以查看Node版本号，下载请至：Node官网

    1. 若使用多个node，可以使用nvm来切换node版本（使用）。
    2. 如果使用的Node.js是5.0或更新的版本, 建议安装npm2. xxx版本，安装命令: 
      1
      npm install -g npm@2

  • watchman，官方建议安装，是Facebook的一个用于监控文件变更并触发指定操作的工具：

    1
    $ brew install watchman

  • flow，Flow 是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误：

    1
    $ brew install flow

  • 请仔细看清：官方文档用了一行很不起眼的文字写了这样一句话：We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.
    所以，我以一个过来人告诉大家，真的要时不时的运行：

    1
    $ brew update && brew upgrade

iOS 基础环境

  • XCode，至少7.0以上，你值得拥有。
  • CocoaPods，下载请至：官网。

Android 基础环境

  • AndroidStudio，下载请移步：http://developer.android.com/intl/zh-cn/sdk/index.html
  • Android SDK，这个比较大，需要耐心，且最好翻墙。
  • GenyMotion，这个是Android的模拟器，需要依赖VirtualBox，因为AS提供的模拟器不是很流畅，建议使用这个，不过有真机的话，可以忽略。
  • Gradle，Android编译会需要使用它，工程里一般都有gradlew，运行是会下载gradle最新版本。

安装React Native

运行

1
$npm install -g react-native-cli

这里简单介绍一下npm指令：

  • -g 参数，会将安装至全局，也就是/usr/local/bin下，若无此参数，会安装至当前执行命令的目录。
  • -d 参数，会将npm install的LOG打印至Console。

Qiuck Start（摘自React Native Get Started）

1
$ react-native init AwesomeProject

这个命令会初始化一个AwesomeProject的Project，它会需要一些时间，因为需要下载很多东西，比如：react-native。

To run the iOS app:

  • $ cd AwesomeProject
  • Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
  • Open index.ios.js in your text editor of choice and edit some lines.
  • Hit ⌘-R in your iOS simulator to reload the app and see your change!

To run the Android app:

  • $ cd AwesomeProject
  • $ react-native run-android
  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
  • Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app’s logs

Notice：

  • 运行以上例子，会从本地Server加载 js bundle。
  • 若需要运行在真机上，请查看文档：iOS，Android
  • 有疑问请留言