开启RN之旅——小试牛刀
目录
前言
一、环境搭建
1.1、开发环境介绍
1.2、实战安装
二、RN世界的HelloWorld
2.1、创建工程
2.2、安装JS依赖
2.3、Android工程同步
2.4、运行工程
前言
在正式开启RN的学习之旅之前，先简单介绍一下RN是什么吧。React Native和Flutter是目前最成熟、应用最广泛的两个跨平台解决方案，它们都是通过一套代码同时开发Android和iOS应用，显著提升开发效率，提供接近原生应用的性能和体验。
Flutter性能优于ReactNative，这是不可否认的事实，但是ReactNative学习曲线相对平缓，适合边学边做；Flutter需要学习Dart语言且开发方式嵌套层级深，ReactNative基于JavaScript，比Flutter的Dart语言更易掌握。近年来RN通过在架构、引擎等方面的更新，已显著缩小性能差距。另外RN在Web(React)、小程序(Taro)、桌面端(Electron)均有成熟方案，因此非常有必要了解并学习RN。
一、环境搭建
官网：RN官网 中文网：RN中文网
1.1、开发环境介绍
- React端环境:
- 开发工具：VS Code代码编辑器
- 运行环境：Node.js(版本需v14以上)
- 辅助工具：Watchman(文件监控工具)
- 包管理：npm(建议使用淘宝镜像加速)
- Native端环境:
- Android开发：Android Studio
- iOS开发：Xcode
- 真机或者模拟器
1.2、实战安装
如果之前做过移动端开发，那么Native的环境大家肯定都是有的，反之，如果是做前端开发的，那么Rect的环境肯定也都是有的，根据实际情况补装缺失的环境即可。
①、安装node和watchman
我这边是Mac平台，所以直接通过homebrew安装，打开终端输入如下两个命令回车进行安装：
brew install node 和 brew install watchman
②、安装VSCode
打开网址：https://code.visualstudio.com/
下载安装包之后直接安装即可。
③、安装Android Studio
打开Android的官网下载一步步安装即可：https://developer.android.google.cn/studio?hl=zh-cn
然后需要配置一下环境变量：在终端中输入如下命令后回车：
然后在该文件内编辑一下需要配置的环境变量：
OK，到这里所需的开发环境就配置完成了，接下来，我们来创建一个RN工程，然后试着将它运行起来。
关于环境配置的详细说明，推荐参考文档中的步骤逐步进行即可：
https://reactnative.cn/docs/environment-setup
二、RN世界的HelloWorld
2.1、创建工程
创建工程这一步很简单，打开终端，找到你想要创建工程的目录，然后输入以下命令进行创建：
npx @react-native-community/cli init 工程名
其中有个步骤需要输入一下y让它继续执行，如图所示：
2.2、安装JS依赖
进入到上面创建的工程的根目录，然后输入npm install回车：
2.3、Android工程同步
使用AndroidStudio打开上面创建的Demo工程的下的android文件夹里的工程进行编译，直到编译成功即可。
2.4、运行工程
首先打开一个设备（真机或者模拟器都可以），我这里是启动了一个Android的模拟器。
然后在终端执行以下命令npx react-native run-android运行这个RN工程：
同时它还会弹出一个RN的nodejs服务的窗口，等待执行完毕后，找到刚刚打开的模拟器，可以看到咱们的工程已经跑起来了：
OK，到这里咱们今天的小试牛刀就已经完成了。
祝：工作顺利！