React-native 安卓项目环境搭建、运行

react-native 项目–安卓开发

1. 环境搭建

参考https://reactnative.cn/docs/getting-started 搭建rn项目需要的环境

(1)安装node:

建议安装nvm:node版本管理器,用于管理Node版本,切换node版本、下载、卸载,安装教程参考:nvm安装教程
注:使用nvm下载的Node才可以用nvm进行管理

<!--例如下载:nvm install 12.10.0-->
nvm install node版本号

<!--查看node是否安装成功-->
node -v

<!--查看对应npm是否安装成功-->
npm -v

<!--不成功,卸载,重新下载-->
nvm uninstall xxx
nvm install xxx

(2)安装python2

参考上面链接

(3)安装安装 Android Studio

注意:配置 ANDROID_HOME 环境变量

①新建环境变量名字为:ANDROID_HOME,路径指向指向你的 Android SDK 所在的目录
SDK默认安装目录:

c:\Users\你的用户名\AppData\Local\Android\Sdk

需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效

②把一些工具目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

2.项目克隆

<!--将gitlab.example.com替换成地址:例如:192.168.0.0 -->
①ssh
<!--git clone git@gitlab.example.com:app/Eastsoft-rn.git-->
git clone git@192.168.0.0:app/Eastsoft-rn.git

②http
<!--git clone http://gitlab.example.com/app/Eastsoft-rn.git-->
git clone http://192.168.0.0/app/Eastsoft-rn.git

3.编译运行

开发android项目,直接打开android项目,自动build gradle

(1)连接模拟器
<!--adb连接mumu-->
<!--安卓目录下:-->
adb connect 127.0.0.1:7555

连接到虚拟设备后,点击run

(2)修改模拟器的地址为本机ip地址
(3)调试运行rn项目
1.调试,重新加载
<!--修改项目的时候,重新编译-->

Android:adb shell input keyevent 82

<!--mumu编辑器点击reloading
ps:网速慢的时候,reloading 刷新不出来,需要关闭app,重新打开直接loading-->
2.运行rn项目
react-native start(npm start)
<!-- 
①根目录:react-native start 的时候,会报错,
②在android目录下:adb shell input keyevent 82(执行完1之后,立刻执行2)
③模拟器点击reload,网不好的情况下,会一直加载,关闭模拟器,重新打开(这是个BUg,待解决)
-->

4.常见错误处理:

1.编译时报错
ERROR: Unable to find method 'org.gradle.api.tasks.compile.CompileOptions.setBootClasspath(Ljava/lang/String;)V'.
Possible causes for this unexpected error include:
Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
Re-download dependencies and sync project (requires network)


The state of a Gradle build process (daemon) may be corrupt. Stopping all Gradle daemons may solve this problem.
Stop Gradle build processes (requires restart)

Your project may be using a third-party plugin which is not compatible with the other plugins in the project or the version of Gradle requested by the project.

In the case of corrupt Gradle processes, you can also try closing the IDE and then killing all Java processes.

解决办法:

①Gradle版本修改

解决:修改gradle/wrapper/gradle-wrapper.properties文件

原因:可能是greadle版本太高,导致与项目以前的一些方法不兼容,gradle版本和gradle插件版本要保持对应关系

<!--将下面代码赋值替换gradle-wrapper.properties文件-->

#Fri May 08 16:03:45 CST 2020
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

②Gradle 插件版本修改

    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
//        classpath 'de.undercouch:gradle-download-task:3.1.2'
//        classpath 'de.undercouch:gradle-download-task:3.1.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

解决:修改build.gradle文件

2.运行报错(react-native start):
at FSReqCallback.oncomplete (fs.js:169:21) {
  errno: -4092,
  code: 'EACCES',
  syscall: 'lstat',
  path: 'F:\\app\\new-app\\node_modules\\react-native\\ReactCommon\\fabric\\components\\scrollview\\tests'

解决:将react-native压缩后,再解压,重新start

原因:文件可能被加密

3.react-native打包报错
F:\gitlab\Eastsoft-rn>react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle
'react-native' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

react-native不识别,运行:

npm install -g react-native-cli

5.安装模拟器

1.Genymotion—界面不友好,需要下载虚拟机,安装麻烦

安装教程:参考下面网址
https://www.jianshu.com/p/09ca67aad7ed

<!--连接设备-->
adb connect 192.168.217.101:5555

<!--查看链接的设备-->
adb devices
2.MUMU—界面友好,安装简单—推荐
<!--连接设备-->
adb connect 127.0.0.1:7555

<!--查看链接的设备-->
adb devices
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值