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