专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

react native环境搭建 reactnative环境搭建

ins518 2024-10-07 13:22:20 技术文章 8 ℃ 0 评论

鉴于当下大环境欠佳,所以我时刻具有危机感,不停的升华自己。故而今后会定期开展学习,并把学习心得分享出来,很久没有写学习总结,此般能力仍需重新拾起,时刻保持自己的竞争力,是大环境不好的情况下不易被淘汰的底气

最近在学习react native,所以我把RN开发环境搭建的经验总结一下,分享出来,希望对大家有帮助

第一步:安卓Android Studio

首先得 下载 Android Studio 和应用工具 - Android 开发者 ?|? Android Developers然后安装好。国内的用户可能打不开官方的链接,那就自己用搜索引擎去找能行的下载链接。在安装的界面里选“Custom”这个选项,一定得把下面这几项给选中了:


安装以版本:android-studio-2024.1.1.12


点击android-studio安装包,进入安装流程,

安装过程中可自定义安装位置,安装了

android studio 默认会安装jdk,默认在安装目录下的jbr,版本为java17,可直接采用该jdk进行java开发环境配置。

配置方式:(使用npm启动RN时必须java开发环境)

1、在环境变量中配置添加系统变量JAVA_HOME:D:\android\Android Studio\jbr。

2、在Path变量中新增 %JAVA_HOME%\bin

3、打开cmd,输入javac -version 查看配置是否成功


第二步、创建RN新项目

执行: npx @react-native-community/cli@latest init AwesomeProject828

该步骤会自动下载npm依赖包


第三步、使用Android studio 打开项目(AwesomeProject828/android),进行项目配置

首次使用Android studio打开RN项目时,会将../node_modules/@react-native/gradle-plugin 下的gradle插件加载进来进行构建

1、gradle配置。由于下载资源gradle很慢,可直接下载包后进行配置,配置如下图


gradle下载依赖很慢,需要配置国内镜像,配置方式:

在gradle的本地包下的init.d文件夹下新建文件init.gradle文件,添加内容如下:

allprojects {
    repositories {
        mavenLocal()
        maven { url "https://www.jitpack.io"}
                maven { url "https://maven.aliyun.com/repository/releases"}
                maven { url "https://maven.aliyun.com/repository/google"}
        maven { name "Alibaba" ; url "https://maven.aliyun.com/repository/public" }
        maven { name "Alibabaplugin" ; url "https://maven.aliyun.com/repository/gradle-plugin" }
        maven { name "Alibabacnter" ; url "https://maven.aliyun.com/repository/central" }
        // maven { name "Bstek" ; url "http://nexus.bsdn.org/content/groups/public/" }
        mavenCentral()
    }

    buildscript { 
        repositories { 
             maven { url "https://www.jitpack.io"}
                maven { url "https://maven.aliyun.com/repository/releases"}
                maven { url "https://maven.aliyun.com/repository/google"}
            maven { name "Alibaba" ; url 'https://maven.aliyun.com/repository/public' }
            maven { name "Alibabaplugin" ; url "https://maven.aliyun.com/repository/gradle-plugin" }
            maven { name "Alibabacnter" ; url "https://maven.aliyun.com/repository/central" }
            // maven { name "Bstek" ; url 'http://nexus.bsdn.org/content/groups/public/' }
            maven { name "M2" ; url 'https://plugins.gradle.org/m2/' }
        }
    }
}


2、安装android SDK,然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的34.0.0版本




  1. 创建安卓模拟器,随意选择一个手机分辨率后,选择镜像时需要选择API 34的版本(RN依赖34的版本)


第四步,启动本地工程

1.进行项目构建,点击右上角的sync 按钮,进行项目依赖下载


  1. 在项目目录下(AwesomeProject828)打开cmd执行命令 npm run android,启动前端资源,目前默认端口号为8081,启动成功会打开node命令行界面,如下:

3、启动安卓工程,点击Android studio工具栏上的启动按钮进行项目构建和启动,启动时会自动启动安卓虚拟设置


本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表