React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
本教程将从 环境配置 开始,到 国内镜像加速,最后成功运行 React Native 项目(Android/iOS),适合新手和遇到网络问题的开发者。
1. 环境配置
1.1 安装 Node.js 和 npm/yarn
React Native 需要 Node.js(建议 LTS 版本):
# 安装 Node.js(官网:https://nodejs.org/)
# 安装后检查版本
node -v # 要求 >= 16
npm -v # 或 yarn -v(推荐 yarn)
1.2 安装 Java JDK(Android 必需)
Android 构建需要 JDK 17:
# macOS(Homebrew)
brew install openjdk@17# Linux(Debian/Ubuntu)
sudo apt-get install openjdk-17-jdk# Windows(手动安装)
# 下载:https://adoptium.net/temurin/releases/
验证安装:
java -version # 应显示 "openjdk 17.x.x"
1.3 安装 Android Studio(Android 开发环境)
- 下载 Android Studio。
- 安装时勾选:
- Android SDK
- Android Emulator
- Platform Tools
- 配置环境变量:
# macOS/Linux:添加到 ~/.zshrc 或 ~/.bashrc export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin# Windows:在系统环境变量中添加 ANDROID_HOME 和 Path右键 此电脑 → 属性 → 高级系统设置 → 环境变量在 系统变量 中:1. 新建变量名 ANDROID_HOME,值为 SDK 路径(如 C:\Users\你的用户名\AppData\Local\Android\Sdk)2. 编辑 PATH,添加两条新值:%ANDROID_HOME%\platform-tools%ANDROID_HOME%\emulator
- 验证:
adb --version # 应显示版本号
1.4 安装 Xcode(仅 macOS,iOS 开发)
- 从 App Store 安装 Xcode。
- 安装命令行工具:
xcode-select --install sudo xcodebuild -license accept
2. 创建 React Native 项目
2.1 使用官方模板初始化项目
npx react-native init MyProject
cd MyProject
2.2 启动 Metro 开发服务器
npm start
# 或
yarn start
Metro 会启动一个本地服务(默认端口 8081),提供 JavaScript 代码的热更新。
Metro 是什么?
1. Metro 的核心作用
Metro 是 React Native 专用的 JavaScript 打包工具,负责:
- 实时将你的 React 代码和依赖打包成单个
.bundle
文件 - 支持开发时的热更新(Hot Reloading)
- 提供错误提示和日志(终端中显示的红色错误框就是它的功劳)
2. Metro 的工作流程
3. 你与 Metro 的交互场景
- 启动 Metro:运行
npm start
时,会看到终端显示:Metro Bundler ready on http://localhost:8081
- 调试时:手机上的 JS 代码实际是通过 Metro 服务实时加载的(这就是为什么必须保持
npm start
运行) - 报错时:Metro 会在终端和手机红屏显示错误堆栈
4. 常见 Metro 问题解决
- 问题:
Metro 无法启动(端口占用)
解决:lsof -i :8081 # 查看占用进程 kill -9 <PID> # 强制结束进程
- 问题:
缓存导致代码不更新
解决:npm start -- --reset-cache
总结对比表
概念 | 作用 | 是否需要手动配置 |
---|---|---|
环境变量 | 告诉系统 Android 工具在哪 | ✔️ 必须配置 |
Metro | 打包和运行 JS 代码 | ❌ 自动集成于 RN 项目 |
3. 配置国内镜像加速
3.1 配置 npm/yarn 镜像(加速 JS 依赖下载)
# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com
# 或
yarn config set registry https://registry.npmmirror.com
3.2 配置 Gradle 镜像(加速 Android 依赖下载)
- 修改
android/build.gradle
:allprojects {repositories {// 阿里云镜像(优先)maven { url 'https://maven.aliyun.com/repository/public' }maven { url 'https://maven.aliyun.com/repository/google' }// 腾讯云镜像(备用)maven { url 'https://mirrors.cloud.tencent.com/nexus/repository/maven-public/' }// 默认仓库(确保兼容性)google()mavenCentral()} }
- 修改
android/gradle/wrapper/gradle-wrapper.properties
:# 替换为腾讯云镜像 distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.13-bin.zip
3.3 配置 Maven 镜像(加速 Android 原生库下载)
在 android/build.gradle
的 buildscript
中添加:
buildscript {repositories {maven { url 'https://maven.aliyun.com/repository/public' }maven { url 'https://maven.aliyun.com/repository/google' }google()mavenCentral()}
}
4. 运行项目
4.1 运行 Android 版本
- 启动 Android 模拟器(通过 Android Studio 或命令行):
emulator -list-avds # 列出可用模拟器 emulator -avd Pixel_5_API_34 # 启动模拟器
- 编译并安装 APK:
npx react-native run-android #另起终端运行,和metro分开
- 如果首次运行,Gradle 会从国内镜像下载依赖。
- 成功后会自动安装 APK 并启动应用。
4.2 运行 iOS 版本(仅 macOS)
- 启动 iOS 模拟器:
npx react-native run-ios
- 会自动编译并启动模拟器。
5. 常见问题解决
问题 1:Gradle 下载卡住或超时
- 原因:网络问题或缓存冲突。
- 解决:
cd android ./gradlew clean # 清理构建缓存 rm -rf ~/.gradle/caches/ # 删除全局缓存
问题 2:Could not resolve all dependencies
- 原因:某些库不在镜像中。
- 解决:在
build.gradle
中保留google()
和mavenCentral()
。
问题 3:Metro 无法连接设备
- 解决:
adb reverse tcp:8081 tcp:8081 # 确保设备能访问 Metro
相关文章:
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目) 本教程将从 环境配置 开始,到 国内镜像加速,最后成功运行 React Native 项目(Android/iOS),适合新手和遇到网络问题的开…...
SNR8016语音模块详解(STM32)
目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 三、程序设计 main文件 usart.h文件 usart.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 SNR8016语音模块是智纳捷科技生产的一种离线语音识别模块,设计适合用于DIY领域,开放用户设…...
驱动开发系列54 - Linux Graphics QXL显卡驱动代码分析(一)设备初始化
一:概述 QXL 是QEMU支持的一种虚拟显卡,用于虚拟化环境中的图形加速,旨在提高虚拟机的图形显示和远程桌面的用户体验;QEMU 也称 Quick Emulator,快速仿真器,是一个开源通用的仿真和虚拟化工具,可…...
通过IP计算分析归属地
在产品中可能存在不同客户端,请求同一个服务端接口的场景。 例如小程序和App或者浏览器中,如果需要对请求的归属地进行分析,前提是需要先获取请求所在的国家或城市,这种定位通常需要主动授权,而用户一般是不愿意提供的…...
【网络原理】从零开始深入理解HTTP的报文格式(二)
本篇博客给大家带来的是网络HTTP协议的知识点, 续上篇文章,接着介绍HTTP的报文格式. 🐎文章专栏: JavaEE初阶 🚀若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅…...
【前缀和】二维前缀和(模板题)
DP35 【模板】二维前缀和 DP35 【模板】二维前缀和 给你一个 n 行 m 列的矩阵 A ,下标从 1 开始,接下来有 q 次查询,每次查询输入 4 个参数 x1 , y1 , x2 , y2。 请输出以 (x1, y1) 为左上角,(x2,y2) 为右下角的子矩阵的和。 输入描述: 第一行包含三个整数 …...
【开源工具】Python打造智能IP监控系统:邮件告警+可视化界面+配置持久化
🌐【开源工具】Python打造智能IP监控系统:邮件告警可视化界面配置持久化 🌈 个人主页:创客白泽 - CSDN博客 🔥 系列专栏:🐍《Python开源项目实战》 💡 热爱不止于代码,热…...
kotlin 过滤 filter 函数的作用和使用场景
1. filter 函数的作用 filter 是 Kotlin 集合操作中的一个高阶函数,用于根据指定条件从集合中筛选出符合条件的元素。 作用:遍历集合中的每个元素,并通过给定的 lambda 表达式判断是否保留该元素。返回值:一个新的集合ÿ…...
Java泛型(补档)
核心概念 Java 泛型是 Java SE 1.5 引入的一项重要特性,它的核心思想是 参数化类型(Parameterized Types),即通过将数据类型作为参数传递给类、接口或方法,使代码能够灵活地处理多种类型,同时保证类型安全性…...
C语言发展史:从Unix起源到现代标准演进
C语言发展史:从Unix起源到现代标准演进 C语言的诞生与早期发展 C语言的起源可以追溯到上世纪70年代初期,但其真正的萌芽始于1969年的夏天。在计算机发展史上,这是一个具有划时代意义的时刻。 当时,Ken Thompson和Dennis Ritchi…...
nginx 代理时怎么更改 Remote Address 请求头
今天工作中遇到用 localhost 访问网站能访问后台 api,但是用本机IP地址后就拒绝访问,我怀疑是后台获取 Remote Address 然后设置白名单了只能 localhost 访问。 想用 nginx 更改 Remote Address server {listen 8058;server_name localhost;loca…...
解决STM32待机模式无法下载程序问题的深度探讨
在现代嵌入式系统开发中,STM32系列微控制器因其高性能、低功耗和丰富的外设资源而广受欢迎。然而,开发者在使用STM32时可能会遇到一个问题:当微控制器进入待机模式后,无法通过调试接口(如SWD或JTAG)下载程序…...
进程、线程、进程间通信Unix Domain Sockets (UDS)
进程、线程、UDS 进程和线程进程间通信Unix Domain Sockets (UDS)UDS的核心适用场景和用途配置UDS的几种主要方式socketpair() 基本配置流程socketpair() 进阶——传递文件描述符 补充socketpair() 函数struct msghdr 结构体struct iovecstruct cmsghdrstruct iovec 、struct m…...
大数据平台与数据仓库的核心差异是什么?
随着数据量呈指数级增长,企业面临着如何有效管理、存储和分析这些数据的挑战。 大数据平台和 数据仓库作为两种主流的数据管理工具,常常让企业在选型时感到困惑,它们之间的界限似乎越来越模糊,功能也有所重叠。本文旨在厘清这两种…...
Hadoop虚拟机中配置hosts
( 一)修改虚拟机的主机名 默认情况下,本机的名称叫:localhost。 我们进入linux系统之后,显示出来的就是[rootlocalhost ~]# 。为了方便后面我们更加便捷地访问这台主机,而不是通过ip地址,我们要…...
a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt
实现下面的上传/下载/删除功能:要求支持:【.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt】 分析上面的效果图,分为【上传】按钮和【文件列表】功能: 解决步骤1:上传按钮 直接上代码: <a-uploadmultip…...
QCefView应用和网页的交互
一、demo的主要项目文件 结合QCefView自带的demo代码 main.cpp #include #include <QCefContext.h> #include “MainWindow.h” int main(int argc, char* argv[]) { QApplication a(argc, argv); // build QCefConfig QCefConfig config; config.setUserAgent(“QCef…...
C++,设计模式,【建造者模式】
文章目录 通俗易懂的建造者模式:手把手教你造电脑一、现实中的建造者困境二、建造者模式核心思想三、代码实战:组装电脑1. 产品类 - 电脑2. 抽象建造者 - 装机师傅3. 具体建造者 - 电竞主机版4. 具体建造者 - 办公主机版5. 指挥官 - 装机总控6. 客户端使…...
Axure疑难杂症:中继器制作下拉菜单(多级中继器高级交互)
亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 本文视频课程记录于上述地址第五章中继器专题第11节 课程主题:中继器制作下拉菜单 主要内容:创建条件选区、多级中继器…...
科研 | 光子技术为人工智能注入新动力
译《Nature》25.4.9 发表文章《A photonic processing boost for AI》 ▶ 基于人工智能(artificial intelligence, AI)的系统正被越来越广泛地应用于从基因数据解码到自动驾驶的各类任务。但随着AI模型的规模和应用的扩大,性能天花板与能耗壁…...
SQL语句练习 自学SQL网 多表查询
目录 Day 6 用JOINs进行多表联合查询 Day 7 外连接 OUTER JOINs Day 8 外连接 特殊关键字 NULLs Day 6 用JOINs进行多表联合查询 SELECT * FROM Boxoffice INNER JOIN movies ON movies.idboxoffice.Movie_id;SELECT * FROM Boxoffice INNER JOIN moviesON movies.idboxoffi…...
北京亦庄机器人马拉松:人机共跑背后的技术突破与产业启示
2025年4月19日,北京亦庄举办了一场具有里程碑意义的科技赛事——全球首个人形机器人半程马拉松。这场人类与20支机器人战队共同参与的21.0975公里竞速,不仅创造了人形机器人连续运动的最长纪录,更成为中国智能制造领域的综合性技术验证平台。…...
大连理工大学选修课——机器学习笔记(6):决策树
决策树 决策树概述 决策树——非参数机器学习方法 参数方法: 参数估计是定义在整个空间的模型 所有训练数据参与估算 所有的检验输入都用相同的模型和参数 非参数方法: 非参数估计采用局部模型 输入空间被分裂为一系列可以用距离度量的局部空间…...
现代前端工具链深度解析:从包管理到构建工具的完整指南
前言 在当今快速发展的前端生态中,高效的工具链已经成为开发者的必备利器。一个优秀的前端工具链可以显著提升开发效率、优化项目性能并改善团队协作体验。本文将深入探讨现代前端开发中最核心的两大工具类别:包管理工具(npm/yarn)和构建工具(Webpack/V…...
[C语言]猜数字游戏
文章目录 一、游戏思路揭秘二、随机数生成大法1、初探随机数:rand函数的魔力2、随机数种子:时间的魔法3、抓住时间的精髓:time函数 三、完善程序四、游戏成果1、游戏效果2、源代码 一、游戏思路揭秘 猜数字游戏,这个听起来就让人…...
【Linux】g++安装教程
Linux上安装g教程 实现c语言在Linux上编译运行 1. 更新软件包列表 打开终端,先更新软件包列表以确保获取最新版本信息: sudo apt update2. 安装 build-essential 工具包 build-essential 包含 g、gcc、make 和其他编译所需的工具: sudo…...
MQTT - Android MQTT 编码实战(MQTT 客户端创建、MQTT 客户端事件、MQTT 客户端连接配置、MQTT 客户端主题)
Android MQTT 编码实战 1、Settting 在项目级 build.gradle 目录下导入 MQTT 客户端依赖 implementation org.eclipse.paho:org.eclipse.paho.mqttv5.client:1.2.5 implementation org.eclipse.paho:org.eclipse.paho.android.service:1.1.1AndroidManifest.xml,…...
Redis分布式锁使用以及对接支付宝,paypal,strip跨境支付
本章重点在于如何使用redis的分布式锁来锁定库存。减少超卖,同时也对接了支付宝,paypal,strip跨境支付 第一步先建立一个商品表 CREATE TABLE sys_product (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键,code varchar(60) DEFAUL…...
沙箱逃逸(Python沙盒逃逸深度解析)
沙箱逃逸(Python沙盒逃逸深度解析) 一、沙盒逃逸的核心目标 执行系统命令 通过调用os.system、subprocess.Popen等函数执行Shell命令,例如读取文件或反弹Shell。 文件操作 读取敏感文件(如/etc/passwd)、写入后门文件…...
k8s-Pod生命周期
初始化容器 初始化容器是在pod的主容器启动之前要运行的容器,主要是做一些主容器的前置工作,它具有两大特征: 1. 初始化容器必须运行完成直至结束,若某初始化容器运行失败,那么kubernetes需要重启它直到成功完成 2. 初…...
基于Springboot + vue实现的中医院问诊系统
项目描述 本系统包含管理员、医生、用户三个角色。 管理员角色: 用户管理:管理系统中所有用户的信息,包括添加、删除和修改用户。 配置管理:管理系统配置参数,如上传图片的路径等。 权限管理:分配和管理…...
computed计算值为什么还可以依赖另外一个computed计算值?
在 Vue(或类似的响应式框架)中,computed 计算属性之所以可以依赖另一个 computed 属性,是因为: ✅ 本质上 computed 是响应式依赖的“派生值” 每个 computed 本质上就是一个 基于其他响应式数据计算出来的值。 当你在…...
近期实践总结
一、计算机二级考试到底教会了我们什么? 1、概况 根据本人复习、考试的经验,不难发现里面的试题或多或少有些死板(甚至可以说落后于时代),当今时代已经不是二十年前什么都需要手搓的时代了,引擎、集成类软…...
Arduion 第一天,变量的详细解析
Arduino变量详解与嵌入式开发扩展 一、变量基础篇 1.1 变量声明与初始化 <ARDUINO>int ledPin 13; // 声明并初始化float sensorValue; // 先声明后赋值unsigned long startTime; // 无符号长整型void setup() {sensorValue analogRead(A0) *…...
【每日八股】复习 MySQL Day3:锁
文章目录 昨日内容复习MySQL 使用 B 树作为索引的优势是什么?索引有哪几种?什么是最左匹配原则?索引区分度?联合索引如何排序?使用索引有哪些缺陷?什么时候需要建立索引,什么时候不需要…...
2025年KBS新算法 SCI1区TOP:长颖燕麦优化算法AOO,深度解析+性能实测
目录 1.摘要2.算法原理3.结果展示4.参考文献5.文章&代码获取 1.摘要 本文提出了一种新颖的元启发式算法——长颖燕麦优化算法(AOO),该算法灵感来自动画燕麦在环境中的自然行为。AOO模拟了长颖燕麦的三种独特行为:(i) 通过自然…...
1.4 点云数据获取方式——结构光相机
图1-4-1结构光相机 结构光相机作为获取三维点云数据的关键设备,其工作原理基于主动式测量技术。通过投射已知图案,如条纹、点阵、格雷码等,至物体表面,这些图案会因物体表面的高度变化而发生变形。与此同时,利用相机从特定...
2025.4.29总结
工作:最近手头活变得多起来了,毕竟要测两个版本,有时候觉得很奇怪,活少的时候,又想让别人多分点活,活多的时候,又会有些许不自然。这种反差往往伴随着项目的节奏,伴随着两个极端。所…...
初探RAG
源码 核心工作流程 读取文件的内容将内容保存在向量数据库检索向量数据库用户的问题用户问题 上下文【向量数据】 > LLM 读取文件内容【pdf为例】 from pdfminer.high_level import extract_pages from pdfminer.layout import LTTextContainerclass PDFFileLoader():d…...
AIGC(生成式AI)技术全景图:从文本到图像的革命
AIGC(生成式AI)技术全景图:从文本到图像的革命 前言 生成式人工智能(AIGC)正以惊人的速度重塑数字内容的生产方式。从GPT系列模型的文本生成,到Stable Diffusion的图像创作,再到Sora的视频合成…...
通信协议:数字世界的隐形语言——从基础认知到工程实践-优雅草卓伊凡
通信协议:数字世界的隐形语言——从基础认知到工程实践-优雅草卓伊凡 一、理解通信协议:数字世界的”隐形语法” 1.1 通信协议的不可见性与现实存在 通信协议如同空气中的无线电波,虽然看不见摸不着,却实实在在支撑着现代数字世…...
RPC复习
RPC复习 RPC (远程过程调用) 全面解析一、RPC 定义与核心作用1. 什么是RPC?2. 核心作用 二、主流RPC框架对比三、RPC适用场景四、RPC的缺陷五、RPC vs REST vs GraphQL六、Java实现案例:使用Dubbo框架案例描述1. 环境准备2. 定义服务接口3. 服务提供方实…...
Express 文件上传不迷路:req.files 一次性讲明白
前言 在开发后台接口的江湖中,文件上传堪称“隐藏副本”,难度不大但坑点极多。本来只想优雅接收一张图片,结果 undefined、报错、路径错乱轮番登场,逼得人想重拾卖烤红薯的梦想。别慌,本文将用轻松幽默的方式,深入拆解 req.files.file 的每个属性,从前端表单到后台处理…...
Leetcode 3530. Maximum Profit from Valid Topological Order in DAG
Leetcode 3530. Maximum Profit from Valid Topological Order in DAG 1. 解题思路2. 代码实现 题目链接:3530. Maximum Profit from Valid Topological Order in DAG 1. 解题思路 这一题的整体思路就是一个动态规划的思路,我们只需要在当前可以访问的…...
Mysql中索引的知识
Mysql中的索引的定义和种类 核心概念:索引是什么? 想象一下你有一本很厚的书,你想找到其中关于某个特定主题的内容。你有两种方法: 从头到尾翻阅整本书:这就像数据库中的全表扫描 (Full Table Scan)。如果书很长&…...
VSCode Verilog编辑仿真环境搭建
VSCode Verilog环境搭建 下载Iverilog安装Iverilog验证安装VS Code安装插件 下载Iverilog 官网下载Iverilog 安装Iverilog 一定要勾选这两项 建议勾选这两项 验证安装 运行Windows PowerShell输入命令:iverilog输入命令:Get-Command gtkwave …...
linux修改环境变量
添加环境变量注意事项。 vim ~/.bashrc 添加环境变量时,需要source ~/.bashrc后才能有效。同时只对当前shell窗口有效,当打开另外的shell窗口时,需要重新source才能起效。 1.修改bashrc文件后 2.source后打开另一个shell窗口则无效ÿ…...
为什么要学习《金刚经》
《金刚经》作为佛教般若经典的核心,以"缘起性空"为思想根基,通过佛陀与须菩提的对话,揭示了破除执著、见真实相的智慧。 以下从核心要义、精髓段落和现实应用三个维度进行解读: 一、核心思想精髓 1. "凡所有相&am…...
【阿里云大模型高级工程师ACP习题集】2.7 通过微调增强模型能力 (上篇)(⭐️⭐️⭐️ 重点章节!!!)
习题集: 【单选题】在大模型微调中,与提示工程和RAG相比,微调的独特优势在于( ) A. 无需外部工具即可提升模型表现 B. 能让模型学习特定领域知识,提升底层能力 C. 可以更高效地检索知识 D. 能直接提升模型的知识边界,无需训练 【多选题】以下关于机器学习和传统编程的说…...
Docker 容器双网卡访问物理雷达网络教程
作者: 陈梓洋 环境: ubuntu 22.04lts 时间: 2025年4月29日 Docker 容器双网卡访问物理雷达网络教程 这个教程适用于这样的场景:容器保留原有 ROS 通信网络(如 bridge 网络),同时需要访问一个物…...