iOS React Native实践系列一

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

React Native for Android

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android， 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。

React Native支持iOS7.0及以上

React Native需要 Xcode 6.3 或者更高的版本。 可以在 App 应用商店里面安装它。

本文基于React Native v0.16.0-rc （2015-11-26）

文档资料来源

http://facebook.github.io/react-native/docs/getting-started.html （官方英文文档）

http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html  （中文文档）

开始在mac上部署react native

1、安装Homebrew，在mac打开终端工具

Launchpad-终端

在终端运行 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

可参考这篇博文  http://www.cnblogs.com/lzrabbit/p/4032515.html

2、安装nvm

在终端运行命令  brew install nvm

安装完成后需要新建文件  ~/.bashrc, ~/.profile, 或者 ~/.zshrc

然后输入以下内容保存,将"$HOME/.nvm"替换为nvm的安装目录，安装目录可以用echo source $(brew --prefix nvm)查看

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

3、安装watchman、flow、npm

运行以下命令

brew install watchman

brew install flow

brew install npm

4、创建React架构

 在工程目录运行以下命令，AwesomeProject替换为你的工程名称

$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/

 创建完成会提示如下信息

To run your app on iOS:

   Open /Users/who/xcode/bookApp/ios/bookApp.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd /Users/who/xcode/bookApp

   react-native run-android

 

ios打开/Users/who/xcode/bookApp/ios/bookApp.xcodeproj 即可