为什么使用react native？
既拥有Native的用户体验、又保留React的开发效率。——引自React Native的发布稿
react native通过一次编写可以在IOS和Android设备上运行。这样可以为公司节约成本，使代码更好维护。（不用再招2大客户端的程序员、代码也不需要维护2套，但现在还有一些组件是属于IOS或者Android专有的所以请尽量选择使用那些用JavaScript编写的组件）。只要熟悉web开发，就可以成为潜在的客户端开发者。使用单一的JavaScript库就能写出真正的原生的iOS和Android的应用来。当然学习react时需要理解其中的概念，还是有些时间成本。那么什么又是react native呢？请往下看。
什么是react native？
Facebook在2015年发布了react native的第一个版本。可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。只要编写一次，能在任何手机端上跑。
-
Build Native Mobile Apps using JavaScript and React。
react native 仅仅使用JavaScript就能让你编写一个原生的手机App。使用起来有点像React，让你使用组件式的形式编写手机App。
它看起来像下面这个样子。import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } } -
使用react native编写的app是一个真的手机App
使用react native，你不用编写一个“mobile web app”或者 “HTML5 app”，你所编写的App都是从 Objective-C 或者 Java原生而来。react native使用一些基本的UI组件去构成IOS和Android的App。你只需使用JavaScript 和 react把这些组件组装在一起。
例如像下面这样一个例子，创建了一个可滑动的视图。
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } } -
不要把时间浪费到重新编译上
react native能让你快速的编写一个app，在重新编译这块，你可以立刻看到看到你修改的效果。使用热重载技术，你甚至可以在运行新的代码，并且保留应用的状态。
热重载技术 -
需要时可以使用原生的代码
react native可以毫不费力的，与Objective-C、java、swift写的原生组件桥接起来。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift - the product development process is the same. </Text> </View> ); } }
如何初始化你的第一个react native项目
由于操作系统的原因，和环境的问题，暂时演示，IOS App的初始化
-
需要node.js, React Native 命令行工具和Watchman
推荐使用Homebrew安装node.js和Watchman。
brew install node
brew install watchman
- 使用npm安装 React Native 命令行工具接口
npm install -g react-native-cli
-
测试安装react native项目
使用react native命令行工具生成一个新的react native项目，命名为MyFirstRNApp，然后进入项目的根目录，运行react-native run-iso命令
react-native init MyFirstRNApp
cd MyFirstRNApp
react-native run-ios
-
react-native init MyFirstRNApp
初始化中的MyFirstRNApp
初始化MyFirstRNApp成功 -
react-native run-ios
编译中
编译成功后弹出，react native控制台页面
第一个react native项目页面
react native项目结构介绍
在项目根目录下有3个文件夹，2个js文件，一个json文件
- 文件夹 android
主要存放关于项目android的文件 - 文件夹 ios
主要存放关于项目ios的文件 - 文件夹 node_modules
存放的是一些项目依赖包 - index.android.js
为安卓 app的入口文件 - index.ios.js
为iOS app的入口文件 - package.json
为该项目依赖包的管理文件
-
index.ios.js 入口文件解析
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*///es6的语法格式 import React, { Component } from 'react'; import { AppRegistry, //入口文件必备,提供整个app组件注册的功能 StyleSheet, //样式表 Text, //react native 提供的组件 Text View //react native 提供的组件 View } from 'react-native'; //js的类文件 class MyFirstApp extends Component { //渲染返回包装好的组件 render() { //返回包装好的组件 return ( <View style={styles.container}> /*相当于div*/ <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } } //样式表文件 const 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('MyFirstApp', () => MyFirstApp);
以上这就是使用JavaScript和react构建的一个原始App的代码，很简单吧。
浅析react native架构
- 1.在不同平台上使用js和jsx语法编写react代码，js解释器可以在不同平台运行。
- 2.通过虚拟DOM更新和刷新状态进行对组件的重新渲染
- 3.将结果展示到不同的终端
jsx
jsx是JavaScript的语法延伸，看起来像XML结构。目前react native支持ES6的语法。
虚拟DOM
React中的DOM并不保证马上影响真实的DOM，react会等到事件循环结束，利用diff算法，通过当前新DOM树与之前的DOM树作比较，计算出最小的步骤更新真实的DOM。这样做的好处是性能得到了很大的保证。
总结
本文对react native是什么，能做什么，做了一个大致的了解，并创建了一个全新的react native项目并成功编译运行，了解了项目中的结构，和接口文件中的内容。浅析了react native架构，理解了LEARN ONCE, WRITE ANYWHERE的道理。简单阐述了，当前版本所支持的语法版本，和解释什么是虚拟DOM，和它的作用。
成熟案例
参考
https://facebook.github.io/react-native/docs/getting-started.html
