项目搭建
本次准备开发阳光沙滩的React-Native的跨端应用，结合目前我的开发技术栈，所以采用React-Native进行开发，也为阳光沙滩的APP添加一枚新成员。
项目准备
在开发之前，先来一个技术选型和版本选择，这里我结合最新的React-Native开发技术栈，列举了一下本次阳光沙滩开发所需相关技术和环境，这里会不断更新。
- React-Native：这是目前该框架的最新稳定版本React-Native-0.69
- Node.js：采用我本地的环境v16.5.0
- Java环境：采用Java11，当前React-Native版本为0.69，0.67版本之后支持的Java环境都是Java11，之前的支持Java8，如果自己电脑只有Java8，又不想安装Java11，那么就选择0.67之前的版本
- Android：需要开发Android环境，这里可以去查看官方文档，文档有很详细的搭建资料React-Native环境搭建
环境搭建
Java环境搭建
采用Windows系统，我选择Java11作为开发环境，但是我又不想移除我的Java8和影响原来的环境，因为有些项目还是Java8编写的，而Windows可以通过切换环境变量来修改Java的版本，所以我采取了这样的一个策略来。
- 去下载Java11的安装包，推荐去Java11下载，直接通过下载msi安装程序进行安装就行，这里不介绍怎么安装Java环境了，很简单，只要保证自己的路径不存在中文或者空格这些就行
- 配置环境变量，直接去搜索环境变量，打开之后找到环境系统环境变量，这里因为是安装过Java8，并且是运行环境或者是jre都是通过匹配路径进行配置的，所以不需要做过多的更改，只需查看当前截图，很简单。
这是Java8的。
安装Watchman
Watchman是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（metro 可以快速捕捉文件的变化从而实现实时刷新）。
它提供了Windows环境，Linux环境和macOS环境，这里就介绍一下Windows环境的安装吧，因为我没有Mac，哈哈哈。
首先就是介绍一下Watchman官网，然后找到这个步骤。
去watchman-Github地址地址下载对应的操作系统的版本就行，之后解压，然后将这个解压的bin目录配置到系统环境变量PATH中，下图是我本机配置的watchman环境变量，我将文件解压的对应的路径，这样配置就可以了。
然后查看是否安装成功,出现下图表示配置成功。
watchman -v
Android环境的搭建
其实主要还是下载Android Studio，配置SDK和RN项目的编译环境。
- 下载安装Android Studio就不需要过多的介绍了，直接去官网下载即可，当然可能有些朋友下载很缓慢，程序员搭梯子访问就行，然后安装，下载对应的SDK。Android Studio 下载
-
下载安装成功之后，需要下载对应版本的SDK，去Android SDK下载界面找到SDK Platforms,然后在右下角勾选"Show Package Details"，之后下载下面的几个东西，具体如下图所示。
-
Android SDK Platform 31 SDK版本
- Intel x86 Atom_64 System Image 这个是模拟器镜像，如果没有真机调试可以选择，如果自己安装有模拟器就使用这个，因为我就不用（是因为我没太多内存分配给他）。
- Android SDK Build-Tools 33 展开这个，然后下载31.0.0版本，
- 下载好SDK和build工具之后，我们需要查看下载到哪一个地方了，然后配置环境变量，因为RN项目编译的时候需要指导Android SDK的路径，之后才可以正常编译。
下面展示如何配置环境变量。首先就是先找到SDK下载位置，可以直接去Android Studio的Settings中的Appearance & Behavior → System Settings → Android SDK就可以查看到SDK的下载路径了。
之后打开自己电脑的环境变量，这里我推荐一个小工具来实现快速更改环境变量。RapidEE，可以快速的更改环境变量，下载安装超级简单，就不介绍了。具体怎么使用请大胆探索吧，关键别把自己环境变量给弄坏了。
// 创建ANDROID_SDK_ROOT环境变量
ANDROID_SDK_ROOT=SDK路径
// 在PATH下面配置这四个环境变量
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin
%ANDROID_SDK_ROOT%\tools\platform-tools
%ANDROID_SDK_ROOT%\tools\emulator
创建项目
项目的初始化
使用node自带的命令npx来拉取项目的ts模板的版本
npx react-native init SunOfBeacheRN --template react-native-template-typescript
看到如上图所示，就表示我们的项目已经初始化成功了，接下来就是运行项目了。
运行项目
项目运行需要使用到模拟器或者是真机调试，这里我模拟器和真机调试都准备了一遍，都可以运行成功，下面我们介绍一下使用Android Studio的模拟器运行。
我们可以查看package.json文件，有对应的执行js代码的命令，就如下图所示就行。可以使用yarn、npx或者npm，建议使用yarn，可以使用npm全局安装yarn
// 全局安装yarn
npm i yarn -g
// 启动
yarn android
模拟器运行
首先就是打开Android Studio，下载对应的模拟器镜像，这里就不再截图了。然后就等模拟器镜像下载好之后配置就行。运行截图如下图所示，这就是创建好了一个RN程序了。
真机运行
真机运行就需要手机打开USB调试模式，然后通过USB数据线接入电脑，然后通过下面命令检查是否连接成功。
C:\Users\46826>adb devices
List of devices attached
16580755 device
emulator-5554 offline
emulator-5556 device
这样就表示连接成功了，如果你的adb命令识别不出来，别担心，去把Android环境变量配置一下就行。
然后还是运行我们的命令yarn android，然后手机会提示需要安装（手机不一样，提示消息也不一样），点击安装程序之后就可以直接打开了，打开界面如下图所示。
这是运行程序之后会弹出的控制台内容。
结尾
这一趟操作下来，还是受益匪浅的，希望自己后期会继续输出相关的文章，敬请期待。（绝对不是鸽王哦！！！）
