一，React Native的出生
（1）Native App 优点是功能强大、性能优越。但终究是受制于苹果，而且多版本维护十分痛苦。
（2）为了不受苹果掌控，Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发。虽然有些成果，但始终离 Native App 有差距，而且这个差距可能永远赶不上。
（3）2012年9月，Facebook 方面承认“Betting on HTML5 was a mistake.”。便放弃移动 HTML5，全力转型 Native App 开发。
（4）在转型 Native App 开发后，Facebook 内部其实还在研发一种新的移动技术，并开始使用这种技术开发内部 App。这个技术便是 React Native。
（5）2015年3月，Facebook 正式公开发布 React Native，并将该技术开源。虽然当时开发平台仅支持 Mac OS，部署也仅支持 iOS 平台。
（6）2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性。
二，React Native与其他技术的比较
在 React Native 出现前，我们通常会选择这三种移动技术（Native App（原生）、HTML5（H5）、Hybrid（混合））之一进行开发。
Native App（原生）：开发原生应用自然性能最好，功能强大。但多平台版本的开发、维护要花费大量的人力物力。
HTML5：虽然有 Web 的优势，即灵活的布局能力、免发版的敏捷迭代潜力、优秀的跨平台特性。在新闻资讯等一些强排版、弱交互的展示类 App 上大展拳脚。但由于 WebView 在移动设备上的性能制约，始终难成大器，这也是 Facebook 放弃其的原因。
Hybrid（混合）：以 cordova为代表的 Hybrid 方式集 Native App 和 Web 优点于一体，使二者相互补短。
而 React Native 思想与上面三者都不一样。它的底层引擎是 JavaScript Core，但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。
三，React Native的优点
（1）性能媲美原生应用
由于 React Native 提供的组件是对原生 API 的暴露。虽然我们是用 js 写的代码，但实际上调用的是原生 API，原生的 UI 组件。体验上足以媲美原生应用。
（2）开发效率高
相比于原生开发，js 学习成本低、语法灵活。允许让 Web 开发者更多地基于现有经验开发 App。
（3）组件化开发
React 强调将应用划分成多个互不相关的组件，每个组件作为一个独立的视图。这种类似搭积木的开发方式使得代码结构清晰、通用性高、可移植性高。上一个项目的某些组件，可以很方便地拿来在下一个项目中使用。对于那些优秀的第三方组件，也能很方便地集成到我们项目中来。
（4）节约开发成本
百分之90多界面可以通过 React Native 开发，一份代码同时可以适配 Android 和 iOS。并通过一些手段自动匹配不同屏幕大小的手机，再也不需要自己去计算视图的大小和位置。
（5）实时远程调试
React Native 的调试比 Cordova 不知道好到哪里去了。开启了实时重载之后，代码一改，app 就自动更新成最新，对于 UI 的搭建简直是省了不少的编译时间。同时可以打开 XCode 实时的看到所有的 log 信息。
（6）代码热部署
我们知道 AppStore 审核流程超级久。而由于 React Native 是用的 js 来写的代码，实时编译的过程能让我们实现应用像网页一样做到热更新，随时发布。真正能够做到上架审核一次，永久 0 审核更新。
（7）有效降低移动应用安装包体积
对于普通复杂度的移动应用，使用 React Native 实现的安装包会比原生代码实现的安装包大。而当移动应用功能越复杂，React Native 安装包体积相比原生代码安装包就越小。
比如当原生代码实现的安装包大于 15MB 时，使用 React Native 改写代码后，安装包就小于原生代码实现的安装包。
五，React Native的原理
React Native的底层会把React转换为原生API
React Native和cordova的区别在于跨平台上面，cordova只要写一套代码，React Native需要iOS,安卓都写，说明React Native底层解析原生API是分开实现的，iOS一套，安卓一套
六，React Native如何把React转化为原生API
React Native会在一开始生成OC模块表，然后把这个模块表传入JS中，JS参照模块表，就能间接调用OC的代码。
注：相当于买了一个机器人（OC），对应一份说明书（模块表），用户（JS）参照说明书去执行机器人的操作。
六，React Native环境搭建
当我们的环境搭建好以后执行下面的命令就可以初始化一个react native代码
react-native init AwesomeProject
现在我们已经初始化了一个react native项目了，接下来我们尝试连接安卓模拟器
首先启动模拟器（我使用的是雷电模拟器）然后我们在项目的根目录打开命令行工具执行以下命令（adb devices命令会显示出我们计算机连接的所有安卓设备）
adb devices
devices目录.png
上面我们得到了雷电模拟器设备的序列号 emulator-5554 后执行下面的命令连接上设备
adb contnect emulator-5554
好了，现在我们可以使用下面的命令启动我们的react native项目了
react-native run-android
react native会启动一个node如下图
node.png
现在们打开雷电模拟器就可以得到一个react native应用了
如果打开雷电模拟器出现的是红屏幕报错请使劲戳这里
复制下面的代码覆盖到app.js 就有机会得到胡歌
image.png
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, ImageBackground, FlatList } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View style={[styles.flex]}>
<ImageBackground source={{ uri: 'http://r.photo.store.qq.com/psb?/V12Ei2iV0DY30O/OfVaf3KTSAmk6P4o8L24OBs2OFY0rvmvTdiA*uoTFN8!/r/dAYBAAAAAAAA' }} style={[styles.bigImage]}>
<View style={[styles.poetry]}>
<Text style={[styles.text]}>人生在世五十载</Text>
<Text style={[styles.text]}>我如朝露降人间</Text>
<Text style={[styles.text]}>人生似梦又如幻</Text>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1
},
bigImage: {
flex: 1,
},
text: {
color: 'blue',
width: 15,
fontSize: 15,
marginRight: 10,
color: '#6435c9'
},
poetry: {
alignSelf: 'flex-end',
flexDirection: 'row',
marginTop: 70,
marginRight: 20,
},
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
胡歌.png
网友评论