项目搭建
本次准备开发阳光沙滩的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,然后手机会提示需要安装(手机不一样,提示消息也不一样),点击安装程序之后就可以直接打开了,打开界面如下图所示。
这是运行程序之后会弹出的控制台内容。
结尾
这一趟操作下来,还是受益匪浅的,希望自己后期会继续输出相关的文章,敬请期待。(绝对不是鸽王哦!!!)