React Native移动端跨平台开发尝试 | 技术创作特训营第一期

前言

半个月前，公司发来了一个新的需求，为当前的CRM系统做移动端App。于是作为公司“技术探索者”的我理所应当得接下挑战，负责学习并传授组内其他人员。本文主要是环境搭建、后端过渡到前端、移动端开发注意事项等个人经验分享，并不专业，如有纰漏还望指正。

01. 为什么是React Native

React Native的github

当前的主流的移动端跨平台方案中，Flutter、React Native、uni-app占据着主要地位。最后一位uni-app他的主战场更多的是小程序，在安卓、IOS的性能上不如前两位。

因为是我们组主要是后端人员，前端的Web开发略有了解，对性能要求不是很高，所以选择了前者

02. 环境搭建

环境选择Windows 、Android

官方地址：

• React Native中文站
• 官方站

英文水平不是很好的情况可以选择国内站，缺点是更新可能不是很及时

React Native环境需要

按照官方的教程，基本不会出现什么卡顿

踩坑及解决方案

• 在我本地电脑的Node版本来到了11 在后续会出现一些意料外的错误

解决方案：推荐使用16 这个大版本

• 这一套完整的下来，大概需要20G左右的空间，其中模拟器占9G左右，默认都是存放在C盘。

解决方案：①修改Gradle的仓库位置②修改模拟器路径

路径: C:\Users\{user}\.android\avd

avd.ini.encoding=UTF-8
# 原来位置是C盘 
path=D:\RNpackage\sim\Pixel_6_API_34.avd
path.rel=avd\Pixel_6_API_34.avd
target=android-34

后端开发需要补充的点

Node：相当于Java的JDK

npm: 类似Maven

如果上述一切正常，你就会得到如下一个界面

官方样例

03. 补充学习

在进入正式开发之前，还需要补充一些前端 + 移动端的基础

ES6

ES6全称ECMAScript2015，是JS的版本，至于为什么单独强调这版本，这就像JDK8一样。了解更详细内容推荐阮一峰老师的ES6 入门教程

以下列举几个常用的特性

①变量声明let，const

var是在刚学前端时常用的命令，由于一些作用域的问题，会出现一些难以预料的Bug。let和const的出现很好的解决了问题，前者是局部的变量，后者是局部的常量。在开发中避免使用var

②函数声明：箭头函数

在后端开发中，相对应的就是拉姆达表达式。这里更为常见，是可以规避一些问题。

③类的声明

对于只接触一点前端开发的我们，完全没有想过JS中还有类，声明方式也是用class，即使他不是在ES6中才有的。

TypeScript

一个新技术的出现，必然是为了弥补前者的不足。在JS中，在类型方面，我们称之为弱类型。

代码样例：

var x = 1;
x = "2"; // 不会报错

如果这样，会使在执行过程中出现意外的错误。TypeScript就是为了解决弱类型才引入（还又一些其他扩展，不过多介绍）。

以上换成后者的写法：

let x: number = 1;
x = "2"; // 报错 x 类型为`number`，不能转成 `string`

React

React Native的语法，大多数还是按照React的规则来使用的。所以如果又后者的开发经验，前者不会又太多问题。React的思想就是All in JS，所以我们能够在代码中看到，一个文件中，HTML标签、CSS样式，JS脚本都用JS的形式来表示。由此产生了一种新的文件类型，叫做JSX。

JSX/TSX

JSX可以理解为JS的扩展类型，由React提出，后续在其他框架也可以看到使用。TSX就是TS(TypeScript)的扩展。

移动端知识

UI结构

Android UI结构

页面跳转形式

移动端的页面跳转，像是一个栈，每次点击一个页面会压栈/替换。上一个页面不一定要消失，也许会堆叠在一起

04. 体验感悟

让后端同事从0开始做，能明显感受到前端工程化所带来的挑战与不适，如果不是公司实在没任务了，也不会鬼使神差的来做这个。目前两周过去了，每一次敲代码都要来自网上的资料。