前言
半个月前，公司发来了一个新的需求，为当前的CRM系统做移动端App。于是作为公司“技术探索者”的我理所应当得接下挑战，负责学习并传授组内其他人员。本文主要是环境搭建、后端过渡到前端、移动端开发注意事项等个人经验分享，并不专业，如有纰漏还望指正。
01. 为什么是React Native
React Native的github当前的主流的移动端跨平台方案中，Flutter、React Native、uni-app占据着主要地位。最后一位uni-app他的主战场更多的是小程序，在安卓、IOS的性能上不如前两位。
对比 | React native | Flutter |
|---|---|---|
学习成本 | 容易 | 困难 |
性能 | 高 | 更高 |
热修复 | 原生支持 | 需要其他框架 |
厂商 | Face Book |
因为是我们组主要是后端人员，前端的Web开发略有了解，对性能要求不是很高，所以选择了前者
02. 环境搭建
环境选择Windows 、Android
官方地址：
- React Native中文站
- 官方站
英文水平不是很好的情况可以选择国内站，缺点是更新可能不是很及时
React Native环境需要按照官方的教程，基本不会出现什么卡顿
踩坑及解决方案
- 在我本地电脑的
Node版本来到了11 在后续会出现一些意料外的错误
解决方案：推荐使用16 这个大版本
- 这一套完整的下来，大概需要20G左右的空间，其中模拟器占9G左右，默认都是存放在C盘。
解决方案：①修改
Gradle的仓库位置②修改模拟器路径
路径: C:Users{user}.androidavd
avd.ini.encoding=UTF-8
# 原来位置是C盘
path=D:RNpackagesimPixel_6_API_34.avd
path.rel=avdPixel_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中，在类型方面，我们称之为弱类型。
代码样例：
代码语言：javascript复制var x = 1;
x = "2"; // 不会报错如果这样，会使在执行过程中出现意外的错误。TypeScript就是为了解决弱类型才引入（还又一些其他扩展，不过多介绍）。
以上换成后者的写法：
代码语言：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开始做，能明显感受到前端工程化所带来的挑战与不适，如果不是公司实在没任务了，也不会鬼使神差的来做这个。目前两周过去了，每一次敲代码都要来自网上的资料。
