初步了解React Native

187 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第16天,点击查看活动详情

是什么

image.png

React Native是使用JavaScript开发应用,一套代码可以运行在安卓,苹果,网页等多种平台

image.png

根据Jeff Atwood的定律,任何应用都可以并最终都会被使用JavaScript进行开发

构建移动应用的方法

基于WebView

image.png

第一种是使用叫做WebView的浏览器沙盒包装成本地应用,它使用Apache Cordova 或 adobe phonegap技术,其是使用HTML来构建UI,然后只在设备的集成移动浏览器(WebView)中显示,但是不像本地应用一样流畅

基于React

image.png

React使用另一种方法,类似于React Dom 开发Web应用,它使用android 或者ios组件作为构建块,而不是html和Dom。React Native有内置的组件,这些组件被编译成本地UI组件,而你的JavaScript代码是通过虚拟机执行的。这使得React Native比Cordova更具有性能。

React Native应用

虽然你不能把React Web直接应用上传到应用市场,但是你可以使用react技术开发本地应用,并且不需要懂Java 或者Object C

image.png

只需要引入它提供的基础构造元素,如Button,Switch,view等。

image.png

其在运行时,会使用平台本地组件,他可以将react native的view转换成android的view和web的div

image.png

这样用一个应用就可以获得三个应用

image.png

在有些情况中你需要根据平台的差异提供不同的用户体验,它提供平台的监测,以帮助你选择相应的组件进行渲染。

image.png

它不适用CSS进行可视化

image.png

而是每个组件使用一个样式属性,它使用的是一个StyleSheet的JS组件进行构造。

image.png

在开发的时候他支持实时刷新,这样开发的同时就可以看到代码实现同步效果。

image.png

任何平台你都可能使用到本地功能,如摄像头,推送通知,定位等

image.png

这些都可以交给最火的生态圈,在github上你可以找到几乎所有你所需要的包,然后使用npm安装。

image.png

像其他的JavaScript工程一样,它有个构建在React Nactive之上的框架叫做expo。它提供了很多工具用于生产,你可以使用react native构建整个应用,也可以与已有的android和ios应用集成,他不一个非此即彼的解决方案。

expo 官网

React Native 中文网