目录
一、Flutter的优势和劣势
二、ReactNative的优势和劣势
三、我为什么选择ReactNative
四、RN初始化项目
五、VSCode
六、运行结果
一、Flutter的优势和劣势
Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
Flutter开发需要学习dart语言，dart代码嵌套比较深，后期项目不好维护。
二、ReactNative的优势和劣势
从页面框架和自动化工具的角度来看，ReactNative要领先于Flutter。这主要得益于Web技术这么多年的积累，其工具链非常完善。前端开发者能够很轻松地掌握React Native，并进行移动端APP的开发。ReactNative支持原生控件，和原生交互也很有优势。
ReactNative性能不如Flutter。
三、我为什么选择ReactNative
| 类型 | React Native | Flutter |
|---|---|---|
| 语言 | JavaScript | dart |
| 环境 | JSCore | Engine |
| 发布时间 | 2015 | 2017 |
| star | 85.1k+ | 87.3k+ |
| 对比版本 | 0.61.5 | 1.12.13 |
| 空项目打包大小 | Android 20M(可调整至 7.3M) / IOS 1.6M | Android 5.2M / IOS 10.1M |
| GSY项目大小 | Android 28.6M / IOS 9.1M | Android 11.6M / IOS 21.5M |
| 代码产物 | JS Bundle 文件 | 二进制文件 |
| 维护者 | ||
| 风格 | 响应式，Learn once, write anywhere | 响应式，一次编写多平台运行 |
| 支持 | Android、IOS、(PC) | Android、IOS、(Web/PC) |
| 使用代表 | 京东、携程、腾讯课堂 | 闲鱼、美团B端 |
经过上面的对比，Flutter优势很明显，未来Fuchsia普及估计Flutter会达到一个新的高度。目前来看flutter对热更新支持不是很好，而ReactNative用微软的CodePush实现热更新已经很成熟了。国内很多产品利用ReactNative热更新这一特性开发出来了应用内的小程序，比如微信小程序、支付宝小程序、今日头条小程序等等。这也是我选择ReactNative的原因，希望ReactNative重构后更上一层楼。
四、RN初始化项目
npx react-native init WisdomCity
RN初始化项目.png
五、VSCode
安装VSCode提示性插件React-Native/React/Redux snippets for es6/es7
Appjs报错.png
解决办法如下图：启用、禁用JavaScript验证。默认是选择的，取消掉错误就会消失了。
设置.png
VSCode保存ReactNative代码的时候出现错乱，原因是vscode默认关联的是JavaScript，切换成JavaScript-React。
六、运行结果
运行结果.png
关注公众号，查看更多内容.jpg
网友评论