开篇引用React Native中文网的两句话:
React Native使你能够在Javascript和React.js(有些文章直接说成React或者Reactjs)的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once,write anywhere)
一门新的技术出现,总要知道来源、平台支持、性能以及和同等技术的对比!
1.React Native(以下简称RN)是一套前端javascript框架,由facebook开源
2.特点:基于React.js模式中的JSX语法,组件化模式,Virtual DOM
3.优点:
跨平台,兼容Web,IOS,Android三大主流平台
更好的手势识别
实时部署更新,不用多次更新迭代版本
4.同框架:
注:目前RN在ios上仅支持ios7以上,Android仅支持Android4.1以上。以下的平台,会被转换成普通HTML5运行,效果很差
高能警告!!!RN与HTML5无关,RN使用的语言是javascript,但没有html和css!语言虽然是javascript,但是使用的是React.js中的JSX语法,
RN只和React.js有关,以后想到RN就要想到React.js!!大家需要明白一个概念,先有React.js再有的RN!!
React.js是facebook推出的一个前端框架(博主看到有些文章说它不是一个框架,是MVC架构中的视图层)
React.js介绍(摘抄自某篇文章,大家也可以去自己了解下React.js):
在整个Web应用的MVC架构中,你可以将React看作为视图层,并且是一个高效 的视图。React提供了和以往不一样的方式来看待视图,它以组件开发为基础。
对React应用而言,你需要分割你的页面,使其成为一个个的组件。也就是说,你的 应用是由这些组件组合而成的。
你可以通过分割组件的方式去开发复杂的页面或某个功能区块,并且组件是可以 被复用的。这个过程大概类似于用乐高积木去瓶装不同的物体。
我们称这种编程方式称为 组件驱动开发。React的一大特点是其所拥有的虚拟DOM,它让页面渲染变得非常的高效,并且比直接 操纵DOM变得更为可控。
这两大特点的组合使得React具有强大的自上而下的页面渲染 能力。好了,React的有两个特点:组件化和高效的虚拟DOM,但是为什么它这么被看好呢?
因为React更多的是一种概念层面的东西,而库是其次的。也有很多其他遵从了这些思想的第三方实现。和每一个编程概念一样,React尤其 独有的解决方案、工具和工具。
但这里并不会深入的去讨论他们,而是关注React本身
React.js涉及到的几个概念(下面这些概念会伴随着RN开发经常见到):
虚拟DOM(virtual DOM)
组件开发
JSX
打包工具(packager),ES6,构建请求(bundling),debugging等
React.js的本质是web前端框架,用来架构前端视图;
RN是使用Js的写法写Android or IOS APP的一套框架,只不过是用React.js那套模式,运用React.js的JSX语法、ES6编码风格(ES5风格在RN的0.18以上版本放弃)、Virtual DOM渲染。
底层是对native code(java和Objective-c写的Native app)的封装及调用,最终生成的是原生APP而非Web APP
说白了,RN就是类似用写web的方式去写原生应用!用到的语言/语法:
1.RN:JSX语法(运用React.js中的组件),就是在javascipt中写html的代码
ReactDOM.render(
<h1>Hello, world!</h1>,
);
2.native app: Java,Objective-c等原声应用的开发语言(这些语言主要去写RN还没有兼顾到的原生模块,这个会在后面的文章中介绍)
Quick start
先按照RN中文网的QUICK START去搭建环境(下篇文章将详细讲解windows下android的环境搭建,以及遇到的各种问题),以及跑通应用,遇到逻辑理论不理解的,先照做,走一遍流程,体验下它的JSX语法。
整个QUICK START流程走下来,应该遇到几个概念:
(1)react-native-cli:是RN开发的一个终端命令,需要使用npm安装,它可以启动服务,初始化项目,运行项目,安装项目等
(2)packager:是运行项目时启动的一个服务,监听某一端口(默认是8081),该服务主要用来加载js,编译JSX,监听各种客户端的Rolad JS请求等
目录结构
react-native init MyProject会产生基本的工程结构:
(1)index.android.js和index.ios.js是整个RN项目的入口,里面可以包含很多自己写的js文件,然后用packager统一打包成一个index.android.bundle文件加入到android工程下
(2)android和ios是各个平台的东西,当我们在这个目录下运行react-native run-android(或者android studio下运行),整个项目会到node_modules下利用packager构建整个工程
(3)node_moudles中主要包含React-native 的原生代码、各种jar包和packager的东西
(4)package.json主要是当前项目的信息,名称,启动时的文件,react-native的版本
该篇文章,都是博主在学习RN过程中的部分总结,不足和错误的地方,希望读者及时回复予以纠正!!(该篇博客会尽量更新,让读者看后最大限度了解RN)