React Native (RN)项目在web、Android和IOS上运行

使用 React Native Web 实现三端统一开发 在现代应用开发中,跨平台开发已成为降低开发成本和提高效率的重要手段。React Native 是一个广受欢迎的框架,允许开发者使用 JavaScript 和 React 构建 iOS 和 Android 原生应用。而 React Native Web 的出现进一步扩展了这一能力,使得同一套代码可以运行在 Web 平台上,实现真正的“三端统一”开发。本文将详细探讨 React Native Web 的核心概念、架构、项目搭建方式、组件兼容性、布局策略、资源与样式复用,以及构建、部署和 SEO 优化方法,旨在为 阅读详情

必须切换淘宝镜像,否则会一直拉取失败

1、环境搭建:

https://reactnative.cn/docs/environment-setup

2、一键清理 Node 依赖与 npx 缓存,在项目根目录执行: (如果有旧的RN cli)

//删除项目依赖
rm -rf node_modules

//删除 npm 锁文件(如存在)
rm -f package-lock.json yarn.lock

//清理 npm 全局缓存
npm cache clean --force

// 删除 npx 临时缓存
rm -rf ~/.npm/_npx

3、启动顺序

在vscode 终端中先启动(项目根目录)

//只启动 Metro 打包服务(开发服务器)
npx react-native start

然后在另一个终端中启动(如果只执行,这一步,会自动在外面窗口启动 Metro,会报一些错误:如error (0 , _util.styleText) is not a function.)

//启动 Metro + 编译并安装 Android 应用到设备上
yarn android / npx react-native run-android
//OR
yarn ios

4、常用命令

Node 是“运行环境”,npm 是“它自带的包管理工具”。

node -v
v22.12.0
npm -v
11.6.2
nvm ls
nvm use v22.12.0

在这里插入图片描述

5、Android 预览

在这里插入图片描述

6、IOS 预览

在这里插入图片描述
在这里插入图片描述

android RN开发环境搭建 今天,简单讲讲Android React Native开发环境搭建。   首先讲讲什么是React Native开发(RN开发)? React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的... 阅读详情

相关推荐

AWS入门实践-如何在AWS云上创建一个内外网隔离的生产环境

在 AWS 上建立一个内外网分离的生产环境,可以减少应用服务的暴露面,有效的保证你的应用服务器的安全。通常我们会将web应用放在外网的子网内,数据库服务器等放在内网的子网。我们将按照下图来部署动手实践环境,实现在public subnet的EC2虚拟机可以直接通过互联网可以访问,在Private subnet的EC2虚拟机不能通过互联网直接访问,但是却可以在内部来访问互联网安装应用等等。

weixin_39108752的博客 2994

RN(React Native)

使用RN组件库,以及打包webapp,可下载至手机

weixin_73416102的博客 6386

基因树构建全流程:从OrthoFinder到iTOL的保姆级教程(附兰科植物案例)

本文提供了一份从OrthoFinder到iTOL的基因树构建全流程保姆级教程。详细解析了利用OrthoFinder构建物种树、IQ-TREE构建无根基因树、Notung进行树调和生根,以及最终在iTOL中实现专业可视化的每一步操作与实战经验,并以兰科植物NB-ARC基因家族为例进行演示,帮助研究者系统掌握基因树分析方法。

tequila的博客 523

ReactNative项目构建分析与思考之react-native-gradle-plugin

用了这么久的React Native,你真的了解RN项目的构建流程吗?本文剖析了RN项目组织结构、Gradle插件的作用以及RN是如何组织项目的。通过一步步的分析,揭秘了RN项目构建背后的奥秘,为你提供了前所未有的透彻见解。无论你是Android开发者还是React Native爱好者,本文定能让你大开眼界,构建出更加优质的RN应用。快来一探RN构建流程的独门秘籍吧! Copy Retry

喻志强的博客 4208

用 Coze 打造纯自动化 AI 情报助手

本文将引导您逐步构建一个简易的AI情报助手,从提示词到工作流,再到卡片消息,详细讲解了如何利用Coze平台开发自动化工具。过程简单易懂,何不亲自动手一试?如果您对此类内容感兴趣,敬请关注本作者。未来,我将带来更多精彩的AI工具教程,助您迅速掌握各类AI应用。在这个AI时代,让您领先一步。t=O83A2AGI.NET AI 教程 震撼!用 Coze 打造纯自动化 AI 情报助手震撼!

xinzhaobuxuan的博客 2531

ENVI与Sarscape协同处理哨兵一号数据的完整流程解析

本文详细解析了利用ENVI与Sarscape软件协同处理哨兵一号(Sentinel-1)SAR数据的完整工作流程。从环境搭建、数据导入与裁剪,到核心的DEM辅助多时相配准、斑点噪声滤波,再到最终的地理编码与辐射定标,提供了标准化的操作指南与实用技巧,帮助用户高效地将原始雷达数据转化为可用于分析的地理编码产品。

weixin_29251131的博客 339

RN入门---环境搭建和第一个RN项目

一、RN环境的搭建,参照RN中文网,有以下概念Chocolatey:Chocolatey是一个Windows上的包管理器,用于安装windows程序 Python 2: NodeJS:NodeJS是基于javascript的服务端。将本地的js文件(RN里,将返回的js文件通过依赖React翻译成React格式,再通过依赖react-native,翻译为react-nat

wwww_dong的博客 1万+

h5页面调用微信JS-SDK分享到微信好友或者朋友圈的配置

1.引入js <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 2.在页面添加配置 <script type="text/javascript"> var url = location.href..

tiantiandashi的博客 2万+

记第一个RN(react-native)项目

初始化 按需微调 文本输入及处理 通过绝对路径引用资源 路由及导航 数据持久化 网络请求

wuzhengu的博客 1140

超详细 VMware Horizon 虚拟桌面VDI安装步骤

主要的目的是模拟生产环境中的共享存储。自动桌面相当于共享电脑,大家使用同一个虚拟机,对虚拟机的修改都放在用户的配置文件中,RDS桌面池相当于共享的服务器,可以多人同时连接到服务器上。1:之前已经建立好了NFS的存储,这部分配置好后,以后的虚拟机可以安装到NFS的存储中。2: 使用Composer发布系统可以解决SID,机器名冲突的问题,更重要的可以节约磁盘空间,发布的所有系统可以访问一块磁盘。26: 域选择我们之前建立的域,用户名我输入的是管理员,可以在AD域新建用户点击查找,我这里用的是管理员。

vv12345的博客 1万+

华为od 面试八股文_Spring_03_含答案

控制反转IOC是一个很大的概念,可以用不同的方式来实现。其主要实现方式有两种:依赖注入和依赖查找依赖注入;

MISAYAONE的博客 2341

androidstudio虚拟机运行react-native项目踩坑指南

本文详细的记录了照react-native官网文档运行项目踩到的所有坑,诚然,官网只介绍了每一步,最后确实是可以正常运行项目,但是并没有涉及到每一步会出现的问题。此篇文章就每一步可能出现的问题做进一步展开。

星海拾遗 2246

【AI智能体】基于OpenCode 搭建Skills环境与项目实战开发详解

基于OpenCode 搭建Skills环境与项目实战开发详解

congge 8899

react native expo安装

4、回车后会安装项目以及依赖,安装完成后就可以使用vscode进行开发了。可自行体验每个模版创建的内容,一般选择default创建。2、终端会提示你选择你的要创建模版,上下键选择并回车。默认为my-app,如果不需要重新输入你的新项目名称。--template的意思为从模版创建你的项目。

qq_43790319的博客 698

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

网盘直链下载助手完整教程:4 步拿到 9 大网盘直链,交给 IDM / Aria2 多线程下载

网盘直链下载助手(LinkSwift)是一款免费油猴脚本,覆盖 9 大网盘网页版,Windows、macOS、Linux、Android 均可用。它在浏览器里调用网盘厂商公开 API 取回文件真实下载地址,全程不经过第三方中转服务器。 ## 适用自检:它适合谁 - 如果你用网盘网页版下载,速度只有几十 KB/s,既不想开会员,也不想装官方客户端,它适合你。 - 如果你有几 GB 的大文件(系统

gitblog_00979的博客 323

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

React Native的概述,React Native的优缺点,React Native开发/运行环境的搭建

React Native概述 React是一个构建用户界面的JS框架,实现了数据的响应式和组件化开发,本身既可以用于Web网站项目,也可以用于创建移动端App项目. 相较于Vue.js在移动端只能构建WebApp,React生态系统中有一个可以构建"真正原生App"的扩展----React Native,可以说:“RN是React生态圈可以傲视其它对手的绝对功臣”. RN可将JS编译成Java/OC语言 目前最新版本是0.67 React Native的优缺点 优点 1.RN可将标记元素转化为真实的原生UI

人间真的不值得的博客 2万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

[快速上手RN] 0.React Native 快速启动项目

在你的手机上快速启动一个APP

iMingzhen的博客 4707

RN (React Native)

React Native 是跨平台开发框架,用 JavaScript 和 React 开发,能够在 iOS 和 Android 上运行。组件化开发让你用小模块构建应用。通过,你可以轻松与原生功能进行交互。热更新功能大大提高了开发效率。虽然它不是完美的,但对大部分普通应用,React Native 都能提供很好的开发体验和性能。所以,如果你有前端背景,想要进入移动开发领域,或者你正在开发一个需要同时支持 iOS 和 Android 的应用,React Native 可能是一个很好的选择!

qq_60535125的博客 3611

如何将React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问。这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所...

hahahhahahahha123456的博客 3390

android studio 开发react native,安装android Studio和运行react native项目(跳坑篇)

1.需配环境变量,值为sdk的地址。ANDROID_HOME 值:E:\Users\HP\AppData\Local\Android\sdk2.下载gradle-2.14.1-all.zip 包修改地址为本地gradle压缩包的地址,这里应该注意路径不可有带空格的,比如Program Files是会出错的。先打开在android Studio导入项目要导入项目android目录下才有效,如E:\...

weixin_31064267的博客 1646

【前端-React Native】移动端原生开发整合React Native Elements教程-安卓示例

React Native (RN)是一个用于构建跨平台应用程序的 JavaScript 框架。2015年由facebook开源,社区驱动。RN使用 React 为 Android、iOS 等创建原生应用,现在甚至已经探索出了包括React Native Windows、React Native macOS和React Native Web等新的项目,支持更多的平台。

Ric的博客 4180

React 和 ReactNative 第二版(四)

在本书的前面,我介绍了渲染目标的概念-React 组件渲染到的东西。就 React 程序员而言,渲染目标是抽象的。例如,在 React 中,渲染目标可以是字符串,也可以是 DOM。这就是为什么您的组件从不直接与渲染目标进行交互的原因,因为您永远不能假设渲染发生的位置。移动平台具有开发人员可以利用的 UI 小部件库,以构建该平台的应用程序。在 Android 上,开发人员实现 Java 应用程序,而在 iOS 上,开发人员实现 Swift 应用程序。如果您想要一个功能齐全的移动应用程序,您将不得不选择一个。

龙哥盟 1064

create-react-native-module:打造React Native原生模块的终极工具详解

create-react-native-module是一款功能强大的工具,能够通过单一命令快速创建React Native库模块或原生视图组件,极大地简化了开发者构建原生模块的流程,是React Native开发中不可或缺的效率工具。 ## 🚀 为什么选择create-react-native-module? 在React Native开发中,创建原生模块往往需要为每个支持的平台编写大量原生

gitblog_00890的博客 1023

styled-components 原生渲染:vertical-align 在 React Native 与 react-native-web 上的语义对齐、平台差异与降级方案

本篇文章聚焦 styled-components 对 `vertical-align` 这一 CSS 声明在原生渲染管线(React Native / react-native-web)中的特殊处理:它如何在 rn-web 上把 `top | middle | bottom` 翻译成与 React Native `verticalAlign`(Android 的 `textAlignVertica

gitblog_01085的博客 1014

React Native三端同构

React Native三端同构,即iOS、Android、Web共用一套代码,已知React Native已经支持iOS、Android,所以只需要做支持Web的工作就行了。 首先我们可以利用create-react-app创建Web项目,首先执行以下命令,安装create-react-app(要求npm 6+) npm install -g create-react-app 下一步, ...

JaydenKey的博客 2910

ReactJs和React Native的联系和差异

1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。2,React Native的目的 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app,但是性能可能比原声app差一点。3...

dengla6847的博客 732
上一篇: 快速删除node_modules文件夹,清缓存
下一篇: 在 macOS 里配置环境变量
黄毛火烧雪下
黄毛火烧雪下 领域专家: 操作系统技术领域 领域专家: 操作系统技术领域
博客等级 码龄14年 7714粉丝 439原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄毛火烧雪下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值