转载请注明出处：http://blog.csdn.net/smartbetter/article/details/64190798

我们已经了解像 Titanium 和 PhoneGap 等框架，它们能让开发者用 Web 技术构建移动应用。这是一个优势，支持开发者使用原先网络和移动开发的相关技术。仅如此，相同的代码库经过小幅度的修改便能适用多个平台——这就是著名的一次编写，到处运行。然而，当涉及到构建应用的性能时，这些框架的缺点显露无遗，尽管它们有一些吸引力，但却一直更适用于构建原生应用。React Native 却与众不同。像 PhoneGap 这样的框架是将网页内容包装成 WebView，导致 UI 元素并没有原生的感觉，而 React Native 则使用原生 iOS 或 Android 组件支持的 JavaScript 组件，所以你构建的应用是完全原生的。

本篇就是使用 React Native 技术开发跨平台 Native App，React Native是FaceBook开源的一套用于开发移动端跨平台App的技术框架。React Native并不是在Webkit浏览器上运行Html5与js，而是自己构建了一个用于渲染js的一个引擎，可以说性能比Html+WebView的方式高出了很多。另外，React Native还支持动态更新。

1.搭建React Native开发环境

本篇以Mac系统为例进行搭建，在Mac平台开发React Native需要安装以下环境和工具：

1）Node.js（做React Native开发会经常和Node.js打交道，例如用npm start命令启动React Native的启动器；用npm install 安装项目
所依赖的第三方组件；用npm publish往npm上发布一些组件等）
2）React Native Command Line Tools
3）Android Studio／XCode

在Mac上Node.js可以通过Homebrew（Homebrew安装方法请自行百度）进行安装：

brew install node                 // 安装Node.js，安装完成后可以通过 npm -v 查看版本信息

下来安装React Native命令行工具：

npm install -g react-native-cli   // 安装完成后可以通过 react-native --help 来查看它所支持的所有命令

然后安装 Android Studio／XCode 就可以了。

另外为了提高npm的下载速度，可以使用淘宝的npm镜像，Mac平台设置npm镜像步骤如下：

$ open .   // 在终端中输入，打开用户的根目录

然后找到.npmrc文件(如果没有请新建该文件)，编辑文件内容为：

registry = https://registry.npm.taobao.org

2.运行React Native项目

首先初始化一个项目：

$ cd /Desktop/ReactNative
$ react-native init FirstApp

初始化完成后我们看下目录结构：

__tests__     存放着js代码测试的一个项目
android       存放着React Native的android部分的项目
ios           存放着React Native的ios部分的项目
node_modules  存放着项目所依赖的一些npm包，通过npm install安装的包都会放在这个目录下。
package.json  npm的一些配置文件

下来我们看如何运行android和ios项目：

1.通过命令行运行：

$ cd FirstApp              // 切换到项目根目录
$ react-native run-android // 此时还会弹出React Native的包管理器（本地服务器），是为了负责向React Native应用同步代码
$ react-native run-ios

如果你使用的是真机，那么还需要配置一下 Debug server host & port for device，在直机上打开应用并摇动一下手机，会弹出框如图（虚拟机可通过command+D打开）：

点 Dev Settings 选项 打开设置窗口，再点击 Debug server host & port for device 选项，输入计算机上的ip地址和端口号（默认8081）。最后点击确定后，关闭窗口，重新打开应用即可。

2.通过开发工具运行：

android项目使用Android Studio打开FirstApp/android运行即可，ios项目则使用XCode打开FirstApp/ios/FirstApp.xcodeproj运行即可。最后React Native的开发工具推荐使用 WebStorm。

3.运行官方Examples项目

React Native 的开源地址为：https://github.com/facebook/react-native

$ git clone https://github.com/facebook/react-native.git

然后在react-native目录新建local.properties文件，配置本地ndk和sdk的目录地址：

ndk.dir=/Users/guochao/Library/Android/sdk/android-ndk-r10e
sdk.dir=/Users/guochao/Library/Android/sdk

执行：

$ cd react-native && npm install        // 添加了Node_Modules模块(其中包含了react-native核心库)
$ ./gradlew :Examples:UIExplorer:android:app:installDebug // 组建和编译Android项目
$ ./packager/packager.sh                  // 启动npm包管理器（服务器）

到此项目就可以运行到手机上了。

4.运行官方Examples项目遇到的坑

对比ios，编译运行android项目就显得复杂些了，下面总结一下android项目编译和启动npm包管理器过程中可能出现的问题和解决方案：

1.Error: Execution failed for task ‘:ReactAndroid:buildReactNdkLib’

Error: Execution failed for task ‘:ReactAndroid:buildReactNdkLib’.

Process ‘command ‘/Users/用户名/Library/Android/sdk/ndk-bundle/ndk-build” finished with non-zero exit value 2

解决方案：

这个是ndk的版本问题，使用android-ndk-r10e后正常。
下载链接：MacOS：https://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
Windows：https://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
Linux：https://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip

下载完成后将对应目录下ndk文件夹替换即可。

2.Error: Cannot find module ‘graceful-fs’

Error: Cannot find module ‘graceful-fs’

at Function.Module._resolveFilename (module.js:470:15)

at Function.Module._load (module.js:418:25)

at Module.require (module.js:498:17)

at require (internal/module.js:20:19)

at Object.

解决方案：

$ sudo npm install

3. ERROR Error watching file for changes: EMFILE

ERROR Error watching file for changes: EMFILE {“code”:”EMFILE”,”errno”:”EMFILE”,”syscall”:”Error watching file for changes:”,”filename”:null}

解决方案：

$ brew install watchman       // 重新安装watchman

5.使用WebStorm开发React Native

这里推荐使用WebStorm创建React Native项目（比前面说的创建方式方便了好多，WebStorm还是强大的，注意的是 项目/android/下 local.properties 还是需要手动添加的）：

目录结构如下：

项目运行也十分简单，选择android/ios，然后点击 run 按钮即可运行到手机上。

6.React Native的组件

React组件让你将UI分割成独立的/可重用的一些碎片或部分，这些部分都是相互独立的，例如下面的Header、Tabs、Item、TabBar等。

1.创建组件的三种方式

1）ES6创建组件的方式（推荐）

export default class HelloComponent extends Component {
    // ReactNative组件必不可少的方法，render()方法代表UI部分渲染的界面。
    // 心得：不要在render()函数中做复杂的操作，更不要进行网络请求，数据库读写，I/O等操作。
    render() {
        return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello.{this.props.name}</Text>;
    }
}

2）ES5创建组件的方式

var HelloComponent = React.createClass( {
    render() {
        return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello</Text>;
    }
})
module.exports = HelloComponent; // 导出

3）函数式定义的无状态组件（不能使用this）

function HelloComponent(props) {
    return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello.{props.name}</Text>;
}
module.exports = HelloComponent;

下来我们就可以调用创建下的组件了：

import HelloComponent from ‘./HelloComponent‘;
export default class setup extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <HelloComponent
                    name="zhangsan"
                />
            </View>
        );
    }
}

我们运行到手机上，可以看到如下的样子：

Demo已经放在了GitHub：https://github.com/smartbetter/ReactNativeDemo

7.React Native组件的生命周期

8.React Native开源组件

1.Navigation

react-native-router-flux：一款很火的导航组件。

react-native-navbar：一款用于React Native上的可定制的导航条。

react-native-tab-navigator：一款兼容Android、iOS的TabBar组件。

react-native-drawer-layout：抽屉组件。

react-native-drawer：另一款抽屉组件。

2.ViewPager

react-native-swiper：一款轮番滑动的组件。

react-native-looped-carousel：滚动轮播组件。

3.ListView&ScrollView

react-native-refreshable-listview：下拉刷新组件。

react-native-swipe-list-view：滑动删除组件。

react-native-swipeout：iOS样式的划动删除组件。

react-native-sortable-listview：拖拽排序组件。

react-native-draggablelist：拖排序组件。

react-native-SortableList：拖拽排序组件。

4.Text&Rich Content

react-native-htmlview：HTML显示组件，渲染HTML text 。

5.弹框

react-native-easy-toast：一款用于React Native上消息提示弹框组件，使用方便，支持定义Toast，支持iOS,Android。

react-native-modal：模态框，作者已经将该组件添加到React Native，所以开发者可以直接使用Modal;

react-native-popover：一款类似Android popupwindow的弹出框组件。

6.Material Design

mrn：Material Design组件库。

react-native-material-design：一款用于React Native上的材料设计UI组件库。

7.TabLayout

react-native-scrollable-tab-view：一款用于React Native上TabLayout组件。

9.React Native开源框架&库

NativeBase：一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。

tcomb-form-native：强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。

RNShareSDK：一款基于原生平台ShareSDK的ReactNative插件,方便RN开发者集成各大社交平台的分享和授权功能。

10.React Native开源APP

GitHubPopular：基于React Native的查看、阅读、收藏GitHub上 最受欢迎的开源项目的APP，不仅如此，它还是一款GitHub Trending的客户端。

React Native官方Demo：React Native官方Demo，汇集了各种组件，API的使用Examples。

Facebook F8 App：基于React Native 的2016 F8大会APP。

HackerNews-React-Native：Hacker 新闻客户端。

react-native-nw-react-calculator：基于React Native的计算器，iOS/Android、Web、桌面多端。

react-native-dribbble-app：基于React Native的Dribbble客户端。

noder-react-native：Noder-cnodejs客户端。

ZhiHuDaily-React-Native：知乎日报Android版。

react-native-gitfeed：一款基于React Native的GitHub客户端。

FinanceReactNative：Finance - 股票报价app。

React-Native-Gank：Gank.io客户端。

leanote-ios-rnLeanote：Leanote for iOS(云笔记)。

shopping-react-native ：购物app-界面。

react-native-nba-app：This is why we play。

react-native-gitosc：使用React Native重写的OSChina的[email protected]客户端。

reading：iReading App。

喜欢本文记得 “顶” 一下哦！