React Native的尝试
前言:
前端跨平台一直是我感兴趣的地方,有三个前端想了解,一个是web前端用vue+elementUI;一个是手机前端用vue+uniapp;一个是小程序;桌面前端暂时不涉及。
目前看看RN触类旁通;以《大前端入门指南》作为参考。
内容有:RN介绍、RN使用、RN实战。
文章目录
RN介绍
RN是使用JavaScript和React框架跨平台开发原生应用的开源技术框架。设计理念是即拥有Native的用户体验,又保留React框架的开发效率。
React
React是Facebook在2013年开源出的JavaScript库,用于创建可复用、可聚合web组件。React把界面分为一个个组件,通过对这些组件的嵌套、组合得到可交互的复杂界面。具有以下三个特点:
- 组件化。通过对这些组件的嵌套、组合得到可交互的复杂界面。
- 声明式设计。采用JSX语法声明视图。
- 单向数据流。数据发生变化时,直接渲染整个UI。
JSX语法
JSX是JavaScript语法的扩展,是React用来描述UI组件的语法。JSX可以定义React得到属性和元素。JSX可以使用JavaScript表达式,基本用法与HTML类似,使用成对的标签或直接写入数据。如
const root=<div><h1>hello</h1></div>
ReactDOM.render(root,document.getElementById("root"));
组件
组件是react的核心,组件将UI划分为一些独立、可复用的模块。
react的组件通过使用ES6 class即类组件的方式定义组件。class定义组件需要class继承Reac.Component,并且class内部必须定义render方法,render方法返回代表该组件UI的reader元素。定义组件后,使用ES6 export将模块作为默认模块导出,这样在其他JavaScript文件中使用导入的模块。
state是组件的内部状态,当state改变时相应的UI会重新渲染。使用时通过this.state在constructor构造方法中进行初始化,状态改变时通过this.setState方法改变状态。
props和方法参数类似,是react组件间联系的机制,用于把父组件中的数据或方法传递给子组件,供子组件使用。即父组件通过属性的形式向子组件传递参数,子组件通过props接收父组件传递过来的参数。
组件的生命周期
RN中的组件和Android的activity类似,同样有生命周期,理解生命周期是合理开发的关键。
constructor是RN组件的构造方法,在RN组件被加载前调用,且只调用一次,使用时需要在构造方法中先调用super(props),主要对组件的一些状态进行初始化。这个好眼熟,昨天我写设计模式笔记的时候,还有一种constructor模式。
componentEillMount该函数在初始渲染(render函数被调用)前被调用,且只调用一次。主要进行一些业务初始化操作和设置组件状态。
render是组件的渲染函数,返回JSX或其他组件,用于开始渲染并生成虚拟DOM。在该函数中,只能通过this.state和this.props来访问之前在函数中初始化的数值。
componentDidMount在初始渲染后被调用,且只调用一次。由于UI已经成功渲染,而且是异步的,所有这个函数中进行数据的请求等复杂的操作,不会出现UI错误。
componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate顾名思义。
componentWillUNmount在RN组件被卸载前被调用。主要用于清理一些无用内容,如释放资源、取消订阅、取消计时器和网络请求等。
RN使用
这一章讲开发环境、常用UI组件、网络、导航器、数据存储、原生模块开发六部分内容。
开发环境
搭建React环境。需要先按照node.js和npm。我使用过vue,所以这一部分触类旁通,这里就不多赘述。
windows平台下RN的环境搭建。虽然说Mac系统下安装RN会更好一些(Windows不能进行iOS平台测试),但是我电脑是Windows操作系统。在RN环境搭建前需要在Windows平台安装好Java和Android SDK以及配置好Android开发所需的环境变量。之后安装软件包管理器 Chocolatey,然后安装node.js、Python2,最后安装React Native CLI。这样就可以用RNCLI创建RN应用。以前用过Android studio开发过Android应用,所以具体的不多赘述。
VScode代码编辑器环境搭建。我之前用过vue,所有这一部分触类旁通。不多赘述。
常用UI组件
感觉和Android studio里的很相通。
- view组件:是RN最基本的组件;
- image组件:用来显示多种不同类型的图片;
- text组件:用来显示文本;
- textInput组件:支持文字输入的文本框;
- ScrollView组件:通过滚动操作将一系列不确定高度的子组件装入固定的容器中;
- ListView组件:同于显示一个可以垂直滚动的变化的数据列表;
- FlatList组件:代替ListView;
- SwipeableFlatList组件:在FlatList组件的基础上实现侧滑显示菜单的功能,和侧滑删除效果类似;
- SectionList组件:用于分组、类、区时显示的列表
网络
移动应用开发需要从远程地址获取数据和资源,这时就需要用到网络请求,RN中集成了Fetch API。使用Fetch API可以灵活高效使用HTTP和HTTPS的通信。
导航器
navigator是管理多个页面的呈现、跳转的组件。可以实现翻页式、tab选项卡式、抽屉式的导航布局。
数据存储
RN框架提供了AsyncStorage API,其是一个简单的、异步的、持久化的key-value存储系统(我想到了Redis)。可以代替Android的SharePreference和iOS的NSUserDefaults。
原生模块开发
有时候APP访问平台API,在RN中没有相应的模块包装。RN设计可以在其基础上编写真实的原生代码,并可以访问平台所有的能力。
功能有:获取APP版本号、社会化分享、第三方登录、从相册选照片等;
RN实战
做完RN使用的笔记后,我就不打算去尝试RN的实战了,只做简单了解。除非工作需要,目前以vue全家桶为主,在这里学习RN的原因是我买的《大前端入门指南》里面讲跨端的部分用的是RN的例子,我打算触类旁通。
在这本书的例子中,用RN开发一个完整的APP,主要功能包含启动页、登录页、注册页、首页、个人中心也、书单详情页、侧滑页;
项目创建
用VScode,通过CLI创建项目。RN项目主要包含Android工程、iOS工程以及RN的JS部分。
index.js是整个程序的入口;在这个文件中会将APP.js创建的组件注册进来。
app.js是整个程序的初始组件,这个组件会在index.js中进行注册。
package.json主要是npm需要执行的脚本,以及依赖包的名称和版本号。
Android目录:在该目录会生成Android项目的工程;
iOS目录:在该目录会生成iOS项目的工程;
APP目录:存放RN页面,根据不同业务模块对目录进行分层;里面有common、component、img、navigate、util、view文件夹。
完善功能页面
登录注册:在view文件夹创建一个login的文件夹,里面创建LoginView组件、SplashView组件、RegisterView组件。实现启动页面组件、登录页面组件、注册页面组件以及页面间跳转的路由appStack.js.
首页:包含底部的TabBar和书单列表页面两部分。在view文件夹创建book文件夹,里面创建TabBottomBar组件、BookView组件、BookListView组件、
个人中心页面:在view文件夹创建account文件夹,里面创建MeView组件。
书单详情:在book文件夹创建BookDetailView组件,主要包括书籍评论类别功能和发表评论的功能,界面主要由ScrollView和FlatList组件实现。
侧滑页面:在AppStack.js中创建一个侧滑组件
打包
在发布应用的时候,需要生成一个带签名的apk,一种是使用JDK下bin目录中keytool工具生成一个签名,一种是用Android studio的可视化界面生成签名;
总结
算是了解了一点点RN,之后学习vue全家桶的手机端开发会有些启发,不过目前还是以web前端为主,其他跨端部分只是触类旁通,用来参考,来理解vue。
多看看优秀组件的源码,然后分析里面的数据结构、算法、设计模式可以很有启发。
在RN的介绍中,了解了react,可以和vue对比,增进vue的理解。
在RN的使用中,了解react的组件应用,感觉react模拟Android的过程。对react的应用有了新的启发。
在RN的实战中,了解RN项目的创建、页面设计、打包这一个完整的开发过程。宏观上了解了React框架实现跨端的过程。当前细节上有许多不足,不过作为参考还是足够的。
以上就是我的RN的初次尝试,感觉东西都是触类旁通的,越学越容易。以上可能不打算深入了。不过在vue的跨端使用上还是会进行实战的。
感觉学习首先是理论,然后是实战,最后就是反复实战,熟能生巧,反过来加深理解,加深理解后继续实战;用马克思主义哲学来说就是认识具有反复性和无限性;
更新地址:GitHub