一、为什么是React Native

• 开源！
• 业界关注度非常高
• 开源社区活跃度非常高
• FaceBook出品

业界关注度非常高

发布仅一天star达5k，仅一周star破万，目前达到2.2w+

什么概念呢，对比下：

Linux项目目前star为2.7w

开源社区活跃度非常高

GitHub上react相关项目数量已经达到3.7w+

什么概念呢，对比下：

Linux相关项目数量目前为5.1w+

FaceBook出品

Java目标： “Write once, run anywhere”,

ReactNative目标：“Learn once, write anywhere”

二、React Native是什么

• React是什么
• 层次架构
• UI更新机制

React是什么

        React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.

既拥有Native的用户体验、又保留React的开发效率。

React Native的设计理念

React Native(Android)架构

React Native UI更新机制

三、React Native怎么用

• 开发环境
• 从哪里开始
• 官方只支持Mac

React Native 的开发环境

从哪里开始

滚去学习React

膜拜官方文档即可

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Reasdfasfdact Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Hello World

演示

下载体验

Android

学习资源推荐

• React 入门实例教程

• React Native 官方文档中文版

• GitHub开源项目学习

总结/风险

================================

2. 支持版本

• Android 4.1 (API 16)+ 
• iOS 7.0+

================================

3. 劣势

• Android的HelloWorld基础库将近7m
• iOS 仅1M，但AppStore的审核态度是个问题

1. 优势

• 高性能，高开发效率
• 热更新

一起交流

我的微博

我的微信

我的GitHub

走出温室，世界才刚开始

Step outside of your comfort zone and you may just find something even better than before.

本ppt地址