当前位置: 代码网 > it编程>App开发>Android > React Native环境配置搭建(看这一篇就够了!)

React Native环境配置搭建(看这一篇就够了!)

2024年07月28日 Android 我要评论
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。因为他这个链接在我们下载的时候会特别慢,从而导致下载失败,我们可以直接下载好,然后放入我们电脑中,用绝对路径去访问,这样就会解决这个问题。在这里呢,我们不要去下载最新版本,应该下载0.72版本的项目,因为最新版本的启动命令是用不了的,比如它提供的yarn android。然后我们切换到SDK Tools,下载相关的依赖,同上述方法一样,选择完后,点击Apply,来下载。

首先打开react native官网查看搭建环境教程

搭建开发环境 · react native 中文网icon-default.png?t=n7t8https://reactnative.cn/docs/environment-setup开发平台选择 windows  目标平台选择 android

准备工作:必须安装的依赖有:node、jdk 和 android studio。

1、安装node

 node必须在14以上,可以去 node官网下载,我这里用的是nvmnvm教程 

可以打开cmd,查看当前node版本信息

2、全局安装yarn 

yarn是 facebook 提供的替代  的工具,可以加速 node 模块的下载。
第一步骤已经安装了node,现在可以打开cmd执行以下命令;

npm install -g yarn

3、安装 java development kit [jdk] 17 

java downloads | oracleicon-default.png?t=n7t8https://www.oracle.com/java/technologies/downloads/#jdk17-windows

react native 需要 java development kit [jdk] 17。你可以在命令行中输入 javac -version(请注意是 javac,不是 java)来查看你当前安装的 jdk 版本。如果版本不合要求,则可以去temurinoracle jdk上下载(后者下载需注册登录)。

 配置java环境,打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

新建一个java——home的系统变量,然后根据自己的安装目录来配置变量值。

4. 安装 android studio

下载 android studio 和应用工具 - android 开发者  |  android developers (google.cn)icon-default.png?t=n7t8https://developer.android.google.cn/studio?hl=zh-cn 

 然后下载android studio,进入到安装界面,然后直接无脑下一步next就可以直接安装程序了。

5、下载项目所需要的sdk 

打开项目后,左上角,点击file,之后点击settings打开sdk manager

选中一下所有依赖的sdk

 全部选择完毕后,点击下边的apply按钮进行安装

然后我们切换到sdk tools,下载相关的依赖,同上述方法一样,选择完后,点击apply,来下载。

6、配置sdk

找到我们要下载的配置sdk的路径

 

配置 android_home 环境变量:(这个官网是有步骤的,小编也给各位摘录过来方便操作)

react native 需要通过环境变量来了解你的 android sdk 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为android_home的环境变量(系统或用户变量均可),指向你的 android sdk 所在的目录(具体的路径可能和下图不一致,请自行确认):

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

 

%android_home%\platform-tools
%android_home%\emulator
%android_home%\tools
%android_home%\tools\bin

配置完成后,我们可以打开cmd试一试adb --version命令能不能用 

7、配置虚拟机 virtual device

选择手机小图标,然后点击create virtual device

 选择一个我们喜欢的机型,然后next。

 选择我们之前下载好的33版本,然后点击next

 然后点击finish,完成虚拟机的创建。

 我们可以在虚拟机列表查看我们所创建的虚拟机。

 

8、react native首次运行出现的问题以及所遇到的坑。

1、版本问题

在react native官网为我们提供了两个下载命令,分别是下载最新版和指定版本

 在这里呢,我们不要去下载最新版本,应该下载0.72版本的项目,因为最新版本的启动命令是用不了的,比如它提供的yarn android。

我们应该用下边这段命令去创建项目

npx react-native@x.xx.x init awesomeproject --version x.xx.x
npx react-native@0.72 init demo --version 0.72
 2、android gradle-8.0-bin-zip下载失败、下载很慢的解决方法
 然后在我们创建完成项目之后,我们需要修改gradle文件夹下边的gradle-wrapper.properties文件。

将这段改为distributionurl=file:///c:/android_gradle/gradle-8.0.1-all.zip。

如果按照默认的路径去下载这个压缩包,就会导致超时。因为他这个链接在我们下载的时候会特别慢,从而导致下载失败,我们可以直接下载好,然后放入我们电脑中,用绝对路径去访问,这样就会解决这个问题。

大家可以去我的百度网盘提取这个压缩包

https://pan.baidu.com/s/1hjkzshd0fjr2kyzr4tdgyw?pwd=qqsy

提取码: qqsy 

然后在c盘中创建一个android_gradle文件,将压缩包放入这个文件夹里边就可以了。

3、react-native: android 编译过程中 gradle 依赖包下载各种下载不下来、下载超时、极慢下载的处理方案。

我们在项目目录中找到android文件夹,打开build.gradle文件。将里边换成阿里的镜像源,代码如下:

// top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildtoolsversion = "33.0.0"
        minsdkversion = 21
        compilesdkversion = 33
        targetsdkversion = 33

        // we use ndk 23 which has both m1 support and is the side-by-side ndk version from agp.
        ndkversion = "23.1.7779620"
    }
    repositories {
        // google()
        // mavencentral()
        maven{ url 'https://maven.aliyun.com/repository/google'}
        google()
        mavencentral()

    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

def react_native_version = new file(['node', '--print',"json.parse(require('fs').readfilesync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootdir).text.trim())



直接将原来的代码更改为以上代码即可。我们在下载依赖包的时候一定要注意我们的网络,可以更换为自己的手机热点,尽量用5g网络。下载速度可以大大提高。

9、启动项目

通过以下命令来运行我们的项目:

yarn android

在最后的最后我们就完成了react native项目环境的搭建,我们会进入前端开发的全新领域。

 

以上就是react native环境搭建的全部过程,如果小伙伴在安装中遇见问题,可以在评论区留言,我看到后会在第一时间帮助大家解决问题。如果这篇文章能够帮助到大家,也希望大家可以给小编点一个免费的小赞。 

 

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com