React Native 开发环境搭建

MeiJanMing
243 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

React Native官网，中文网

React Native是Facebook推出的基于React语法构建Android，Ios应用的开源框架，原理简单来说就是在应用上加了一层解析js的Bridge，js通过中间层与原生UI交互以提升效率和体验。

React Native发展的特别快，一定要注意版本问题，依赖版本，jdk版本，绝大部分奇怪的问题都是因为依赖版本不兼容导致的，优先通过调整版本来解决问题。

环境准备

这里只说明Android应用的环境准备

基础环境

  • nodejs：需大于14
  • jdk：编译依赖

React Native0.67 之前依赖jdk8，之后依赖jdk11

  • Android Studio：用来下载Android模拟器及镜像

下载Android Sdk之后需配置环境变量ANDROID_SDK_ROOT，并将下面的路径配置到Path中

%ANDROID_SDK_ROOT%\platform-tools
%ANDROID_SDK_ROOT%\emulator
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin

js包

用于包管理

npm install yarn -g

用于创建，执行react-native项目

npm install react-native-cli -g
npm install @react-native-community/cli -g

开发

创建

执行下面的命令来创建一个空项目

react-native init 项目名称

有两个可选参数，指定版本比较常用，我机器上是jdk1.8所以我创建了0.67版本的项目

  • 指定版本： --version X.XX.X
  • 指定模板： --template react-native-template-typescript

如果创建项目失败可检查是否jdk版本不对，或之前安装过react-native-cli包，删掉旧的重新安装即可。

本机执行

如果前面的AndroidSdk安装好了，在项目根目录执行命令运行项目，执行之后会启动一个Android模拟器，并将构建好的apk传输值模拟器安装并打开。如果连接了设备会优先在设备中执行。设备需打开手机的开发者模式。

yarn/npm run android

android就是react-native run-android的简写。执行时会有一个React-native控制台页面，这里展示console.log输出的日志，也可以在这个页面点击R键重新加载应用，D键打开调试窗口。有时会不显示，退出重新执行run命令即可。

打包

在项目/android目录执行打包命令会生成apk安装包

 ./gradlew app:assembleRelease

更新js及资源文件

react-native bundle --platform android --dev false --entry-file 
index.js --bundle-output android/app/src/main/assets/index.android.bundle 
--assets-dest android/app/src/main/res

这里是一组命令包含jsbundle以及资源文件，如果出现资源文件重复的打包问题可手动删除资源文件。

真机调试中使用到的命令

  • adb devices: 查看当前电脑连接设备
  • adb shell dumpsys meminfo ：打印连接设备内存使用情况
  • adb shell dumpsys cpuinfo ：打印cpu使用情况
  • adb shell input keyevent 82：触发应用调试窗口

adb既AndroidSdk下platform-tools工具包，用于与设备互通。有兴趣可以打印adb --help看看说明，还可以推送文件，安装apk等

avatar
文章
阅读
粉丝