React Native 环境配置 (保姆式教程) 2024版Android Studio

已于 2024-05-14 14:34:48 修改
阅读量408 收藏 9
点赞数 5
分类专栏： React Native Android Studio 文章标签： react native android studio react.js
于 2024-05-14 14:34:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45273808/article/details/138852459
版权

React Native 环境配置

一、React Native 环境配置 (保姆式教程) 2024版Android Studio

官方文档要求了必须要有这三个依赖，关于Android Studio如果不想用它提供的模拟器 可以只单独下载它的SDK即可。

在这里插入图片描述

1.node必须在14以上
在这里插入图片描述
2.JavaJDK Oracle JDK
在这里插入图片描述
我这里用的是17.0.11
在这里插入图片描述
3.下载Android Studio Android Studio我是用的2024版的

安装路径可以自己修改，尽量不要放在C盘，如果你内存多，当我没说。

在这里插入图片描述
在这里插入图片描述
这些都需要勾选上
在这里插入图片描述
在这里插入图片描述
都勾选好，然后点Apply去下载就好了。

1、配置环境变量

在这里插入图片描述
在这里插入图片描述
JAVA_HOME = 这个是按照JDK的路径

在这里插入图片描述
ANDROID_HOME= 这个是安装SDK时候的路径
在这里插入图片描述
在这里插入图片描述
把这四条加进来
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

在这里插入图片描述

set path
set ANDROID_HOME
这两行命令是检验环境搭建是否成功。

npm config set registry https://registry.npm.taobao.org
记得配置一下镜像，不然等会会下载很慢。

这样子就把环境变量配置好了，开始干活！

2、运行项目

npx react-native init ReactNativeApp //ReactNativeApp这个是自己定义的项目名字

在这里插入图片描述
npm run android 这个是打包apk文件
在这里插入图片描述
npm run start 运行项目
在这里插入图片描述
如果是ios 就输入i
如果是android 就输入a

在运行这个之前，记得先把模拟器打开 我这边是用的Android Studio 自带的模拟器
在这里插入图片描述
需要自己先去创建一个模拟器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样即可

在这里插入图片描述
这个得改成mirrors.cloud.tencent.com 不然会下载超时 一直安装失败。 这个gradle-8.0-all.zip 可以根据自己的JDK版本来下载 。

在这里插入图片描述
在这里插入图片描述
这样就完成了项目搭建。

不懂前端的小白
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VSCode 配置React Native开发环境的方法
11-29
本文介绍了VSCode 配置React Native开发环境的方法，分享给大家，具体如下： 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上...
react-native版本升级
Sunshine
01-16 744
1.react-native版本升级npm install --save react-native@0.40//升级到0.40版本2.node版本升级sudo su n stable//如果此指令出现sh: n: command not found，使用下面的指令npm install -g n n stable3.升级react-native-clinpm update -g react-nati
AndroidStudio搭建ReactNative开发环境
duanbokan的专栏
01-04 1159
新建AndroidStudio工程 首先需要新建AndroidStudio工程，注意使用 compileSdkVersion 23 minSdkVersion 16 targetSdkVersion 23 implementation 'com.android.support:appcompat-v7:23.0.1' 初始化 打开AndroidStudio底部的Terminal，然
ReactNative环境搭建（Windows+Android Studio）
Jinda的博客
05-12 714
1.安装Android Studio 首先肯定是 安装Android Studio（包含SDK）(国内推荐) ps:这里有一点要注意，需要为SDK配置环境变量，名称必须为ANDROID_HOME 2.安装Nodo.js（自带npm） 从官网下载node.js的官方4.1版本或更高版本。 安装完成后建议设置npm镜像以加速后面的过程（或使用科学上网工具），也可使用nrm具体参考链接。 n
reactnative项目创建(node版本切换）
我是小奶音啊的博客
05-22 661
1、搭建项目 安装expo-cli npm install -g expo-cli 创建项目 expo init projectName
react native android环境搭建，使用夜神模拟器进行开发（适用于0.73+版本）
好巧的博客
12-11 2051
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。选择 Path 变量，单击编辑，变量值为 Android SDK 安装路径下的 platform-tools 文件夹。启动后， 进入夜神模拟器安装目录的 bin 文件夹，打开命令符执行下面的命令（只需执行一次）如果出现如下情况，说明未自动安装 Android SDK，单击 Edit 进入安装页面。，下载时选择 >= 18 版本。，下载时选择 17 版本。
React-Native环境配置之安装Node.js
小玉的技术博客
09-15 1723
一、安装NVM nvm的作用：nvm是Node的管理器,用来安装Node.js.  安装步骤：1.使用命令行brew install curl或者brew install wget来确保已经安装curl或者wget。                    2.安装方式有两种①使用curl方式安装curl -o- https://raw.githubusercontent.com/crea
React Native 环境搭建的教程
08-29
本篇文章主要介绍了React Native 环境搭建的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc
05-28
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单（也是最常见）的用例是读取NFC包含 的标签NDEF，可以通过以下代码实现： import React from 'react'; import {View, ...
React Native 环境搭建----Andriod端
m0_47745235的博客
10-23 2908
详细！！！React Native 环境搭建----Andriod端（window11系统）
使用react Native开发App时Android Studio开发环境搭建
2401_84048225的博客
04-01 540
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。
react-native搭建android studio环境注意的问题
最新发布
weixin_45315794的博客
04-08 1084
在打开下载的Android Studio后 ，找到更多设置（不同Android studio叫法不一样）中SDK Manager，其中有Android SDK，点击勾选右下方的Show Package detail，选择适配自己项目的SDK版本下载，在实际开发中，有些比较老的项目，对于node的依赖是比较老的，就会存在，不同的版本对node依赖不同，尽管新的nodejs版本会兼容老版本的nodejs，但仍然会存在一些不同问题，那么本地管理不同的node版本，是很有必要的，我用到的是nvm。
最新版react-native环境配置，详细版！
qq_67452534的博客
06-28 3081
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的。引言：写在前面的话：react-native的环境配置过程确实有点繁琐，我在配置的时候，就弄了很久，于是，写下了这篇，希望大家都能顺利配好环境，少踩坑。双击path，然后点编辑，分两次添加，第一次添加：%JAVA_HOME%\bin，第二次添加：%JAVA_HOME%\jre\bin。
Android Studio配置React Native环境
爱吃烧鸡大肘子的肉肉酱的博客
12-09 2314
1、安装Chocolatey. Chocolatey安装教程地址：https://community.chocolatey.org/courses/installation/installing?method=installing-chocolatey 2、安装Python2 Cmd.exe 中使用 choco 安装Python2 3、安装Node Cmd.exe中使用choco安装Node 4、安装Yarn 5、测试安装环境 在当前环境下新建一个React-Native项...
react-native 安装与环境配置（踩坑版，基于android studio）
热门推荐
瞬神_夜一的专栏
10-14 1万+
一.安装java环境 先去官网下载最近java 8版本，并进行安装，注意：java 8之前的版本是不支持react native的，必须使用java 8，下载链接接：java jdk，下载完成之后进行环境变量配置，可以参考此链接进行配置，网页：java8 环境变量配置，至此，java环境搭建完毕。 二.安装android studio 下载androidstudio并进行安装，此
React-Native-Android-Studio整合开发+环境配置+官方实例
weixin_33749242的博客
12-21 1154
linux下React Native开发环境搭建，使用Android-studio工具进行React Native整合开发。 参考React Native的官方文档，通过图文详细记录开发过程。可以查看本文档中涉及Github源码。 步骤1，2，3来配置React Native开发环境步骤4,5做react-native与Andr...
React Native+Android环境搭建和开发配置（Mac）
pcaxb的专栏
07-27 6993
React Native+Android环境搭建和开发配置（Mac）   一.必须的软件安装   1.Homebrew安装，Homebrew,Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。 命令行安装：   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ins...
React Native, android Studio配置的坑 compileDebugJavaWithJavac FAILED
snow126的博客
07-06 643
React native里run android执行后报错 Task :react-native-vector-icons:compileDebugJavaWithJavac FAILED 解决，搜了很多文章什么的，都没用，最后发现是android studio里的gradle里， 打开android studio，打开project structure， 打开里边的dependencies，看到react-native-vector-icons相关依赖删掉即可。（纪念一个我找了大半天不知道怎么解决的
React Native之配置URL Scheme(iOS Android)
06-07
React Native 可以通过配置 URL Scheme 实现从外部应用程序打开应用程序并传递参数。下面是 iOS 和 Android 上配置 URL Scheme 的步骤： ## iOS 1. 在 Xcode 中选择项目，进入 TARGETS -> Info -> URL Types，点击“+”按钮添加 URL Scheme。 2. 在 URL Scheme 输入框中填写自定义的 URL Scheme，例如：myapp。 3. 在 URL Schemes 中填写应用程序的 Bundle ID。 4. 在 Xcode 中保存并编译项目。 5. 在应用程序中，可以通过 Linking 模块的 getInitialURL 方法获取启动应用程序的 URL，并通过 parse 函数解析 URL 中的参数。 示例代码： ```javascript import { Linking } from 'react-native'; Linking.getInitialURL().then(url => { if (url) { const { queryParams } = Linking.parse(url); console.log(queryParams); } }); ``` ## Android 1. 在 AndroidManifest.xml 中添加 intent-filter。 ```xml <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myapp" /> </intent-filter> ``` 2. 在 data 标签中填写自定义的 URL Scheme。 3. 在应用程序中，可以通过 Linking 模块的 getInitialURL 方法获取启动应用程序的 URL，并通过 parse 函数解析 URL 中的参数。 示例代码： ```javascript import { Linking } from 'react-native'; Linking.getInitialURL().then(url => { if (url) { const { queryParams } = Linking.parse(url); console.log(queryParams); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值