ReactNative 简史，让你快速了解上手
每日一言：如果你简单，这个世界就对你简单。
欢迎一起讨论和学习，QQ：732258496 QQ群：478720016
复杂的事情简单化。中国画（水墨画）和欧洲（油画）比，最大特点就是回归本质。知其然，知其所以然。在此利用一点时间把之前项目中用到ReactNative，和自己的想法和思路总结了出来，共大家参考，一起学习和进步。
（效果界面）
一.ReactNative运行环境
下图说明：
1.Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行。
2.Node.js使用事件驱动的非阻塞I / O模型，使其轻量且高效，是一个运行环境，就是JS的一个编译环境。
3.npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、以JavaScript编写的软件包管理系统会随着Node.js自动安装。
4.yarn 快速可靠和安全的依赖关系管理，Yarn是 Facebook 提供的替代 npm 的工具（ReactNative出自Facebook）可靠和安
5.其他文章参考 Node.js是用来做什么的？
二.ReactNative用到的工具利器
三.ReactNative / 原生 / HTML5对比
参考文章：H5、React Native、Native应用对比分析
四.ReactNative与Android原生之间的通讯
1.精选文章 React Native与Android原生通信
2.Android系统为我们提供了webview来加载网页，为了让webview加载的网页可以与App交互，系统提供了一套机制帮助我们更方便的实现通信。同样为了实现React Native与原生App之间的通信，FaceBook也实现了自己的一套交互机制。
五.ReactNative项目结构
| 名称 | 功能描述 |
|---|---|
| _ test _ | 测试文件夹 |
| android | Android文件所在目录，包含AndroidStudio项目环境文件 |
| iOS | iOS文件所在目录，包含XCode项目环境 |
| node_moules | 基于node文件依赖系统产生的相关依赖和第三方lib |
| watchmanconfig | Watchman的配置文件，Watchman用于监控文件变化 |
| flowconfig | flow的配置文件，flow用于静态代码检查 |
| buckconfig | buck的配置文件，buck是Facebook开源的高效编译系统 |
| index.js | Android和IOS程序入口文件（最新版） |
| package.json | 项目基本信息以及依赖信息 |
六.ReactNative使用 (截取部分代码，详细见demo)
1.导入ReactNative包，导入ReactNative组件
import React from "react";
import {
Button,
Platform,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';2.创建ReactNative组件
export default class LoginScreen extends BaseScreen {
constructor(props) {
super(props);
this.state = {text: instructions};
}
render() {
return (
<Button
title="进 入 主 页"
color={Colors.blue}
onPress={() => {
this.props.navigation.navigate("Main")
}}
/>
);
}
}3. StyleSheet.create创建样式实例 ，在应用中只会贝创建一次，不用每次在渲染周期中重新创建
const styles = StyleSheet.create({
textInput: {
flex: 1,
textAlign: 'center',
}
});4.注册入口组件（index.js）
AppRegistry.registerComponent(appName, () => App);
七.项目地址