WHAT - React Native 的 Expo Router

文章目录

  • 核心定义
  • 核心理念
  • 核心功能解析(Features)
    • 1. Native
    • 2. Shareable
    • 3. Offline-first
    • 4. Optimized
    • 5. Iteration
    • 6. Universal
    • 7. Discoverable
  • 总结
  • 示例:页面结构如何变成导航?

原文:https://docs.expo.dev/router/introduction/

这段文档介绍了 Expo Router 的功能和特点。这是一种基于文件结构的导航方式,类似于 Web 里的 Next.js 或 Remix 的路由系统,但用于 React Native + Web 多端统一开发。

下面我将逐段解释它的含义,帮你理解核心概念和实际用途。


核心定义

Expo Router is a file-based router for React Native and web applications.

解释
Expo Router 是一个 基于文件系统的路由解决方案,用于 React Native,同时支持 Web 应用。你创建的页面文件(.tsx 文件)本身就自动成为导航路由。


It allows you to manage navigation between screens in your app, allowing users to move seamlessly between different parts of your app’s UI, using the same components on multiple platforms (Android, iOS, and web).

解释
它基于同一个代码结构(页面和组件),实现多端(iOS / Android / Web)的一致导航体验。你写一次页面,在不同平台通用。


核心理念

It brings the best file-system routing concepts from the web to a universal application — allowing your routing to work across every platform. When a file is added to the app directory, the file automatically becomes a route in your navigation.

解释

  • 类似 Next.js 的自动路由:你在 app/ 目录下新建一个 settings.tsx 文件,这个页面就能通过 /settings 访问。
  • 不再需要手动注册 Stack.ScreenTab.Screen
  • 通过文件结构来定义导航结构,更直观易维护。

核心功能解析(Features)

1. Native

Built on top of our powerful React Navigation suite…

解释

  • Expo Router 是建立在 react-navigation 基础上的。
  • 所以你熟悉的栈导航、底部 Tab、Drawer 全部支持。
  • 但 Expo Router 抽象了一层,让你不再需要手动管理 <Stack.Screen> 等配置。

2. Shareable

Every screen is automatically deep linkable…

解释

  • 每个页面都自动支持 深度链接(Deep Link)
  • 比如你可以通过一个链接打开某个特定页面:myapp://settings/profile
  • 也可以用于 Web 上的链接分享:https://yourapp.com/settings

3. Offline-first

Apps are cached and run offline-first…

解释

  • 构建出的 App 是默认离线可运行的。
  • 支持 Expo 的更新机制(expo-updates),即使用户没有网络也能进入 App,等有网络时自动更新。
  • 所有的 URL 路由解析也不依赖后端服务器。

4. Optimized

Routes are automatically optimized…

解释

  • 页面是 懒加载 的:即用户不访问,页面组件就不会加载,提高性能。
  • 开发环境下也使用 延迟打包,提高编译速度。
  • 这对大型 App 尤其重要。

5. Iteration

Universal Fast Refresh…

解释

  • 所有平台都支持 Fast Refresh(热重载),保持快速开发体验。
  • “artifact memoization” 是构建优化的一部分,避免每次构建都全量编译,提升速度。

6. Universal

Android, iOS, and web share a unified navigation structure…

解释

  • 一个统一的路由系统,支持三端共享。

  • 如果某些页面需要平台特定逻辑,也可以在每个 route 页面里加平台判断,如:

    import { Platform } from 'react-native';
    

7. Discoverable

Build-time static rendering on web, and universal linking to native…

解释

  • Web 端可以预渲染(Static Site Generation,SSR/SSG),对 SEO 友好。
  • 原生 App 支持通用链接(Universal Links / Android App Links),也就是说你可以通过网页链接唤起 App 中的具体页面。

总结

Expo Router = 基于文件结构的路由系统,让你像写 Web 那样开发原生 App(iOS / Android / Web)页面导航。

它的核心优势在于:

  • 自动注册路由
  • 路由即目录结构
  • 深度链接、跨平台统一、懒加载优化
  • 原生 + Web 都适配

示例:页面结构如何变成导航?

📁 app/┣ 📄 index.tsx        → /┣ 📁 settings/┃ ┣ 📄 index.tsx      → /settings┃ ┗ 📄 profile.tsx    → /settings/profile┣ 📄 about.tsx        → /about

你访问 /settings/profile,就会自动加载 app/settings/profile.tsx 文件。不需要手动写 Stack.Screen

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/911974.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/911974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XML读取和设置例子

在Qt C中&#xff0c;可以使用Qt的 QDomDocument类来读取、更新和保存XML文件。这个类提供了对XML文档的强大操作能力&#xff0c;支持通过DOM&#xff08;文档对象模型&#xff09;对XML进行读取、修改、添加和删除节点等操作。 下面是一个详细的例子&#xff0c;演示如何在Qt…

ubuntu 远程桌面 xrdp + frp

经测试VNC启动桌面&#xff0c;并非常规的桌面。 不如RDP好用。因此不用VNC server 一类。 直接安装xrdp 实现UBUNTU 到UBUNTU 桌面的远程共享。 sudo apt install xrdpsudo systemctl start xrdp查看状态&#xff1a; sudo systemctl status xrdp ● xrdp.service - xrdp d…

el-table表头添加说明

1、el-table-column添加render-header 2、编写render函数 renderTipsHeader(h, { column }, item) {return h(span,[h(span, column.label),h(el-tooltip,{props:{effect:dark,content:item.headertip,placement:top},},[h(i, {class:el-icon-question,style:color:#C0C4CC;mar…

【AI论文】MultiFinBen:一个用于金融大语言模型评估的多语言、多模态且具备难度感知能力的基准测试集

摘要&#xff1a;近期&#xff0c;大型语言模型&#xff08;LLMs&#xff09;的进展加速了金融自然语言处理&#xff08;NLP&#xff09;及其应用的发展&#xff0c;然而现有的基准测试仍局限于单语言和单模态场景&#xff0c;往往过度依赖简单任务&#xff0c;无法反映现实世界…

使用 .NET Core+GcExcel,生成 Excel 文件

引言 在当今数字化办公和数据处理的大环境下&#xff0c;在线生成 Excel 文件成为了许多企业和开发者的需求。.NET Core 作为一个跨平台的开源框架&#xff0c;具有高效、灵活等特点&#xff0c;而 GcExcel 是一款功能强大的 Excel 处理组件。将二者结合&#xff0c;可以方便地…

【代码解析】opencv 安卓 SDK sample - 1 - HDR image

很久没有写安卓了&#xff0c;复习复习。用的是官方案例&#xff0c;详见opencv-Android-sdk 包 // 定义包名&#xff0c;表示该类的组织路径 package org.opencv.samples.tutorial1;// 导入所需的OpenCV和Android类库 import org.opencv.android.CameraActivity; // OpenCV…

Web中间件性能调优指南:线程池、长连接与负载均衡的最佳实践

目录 引言一、Web容器线程池配置不当1.1 线程池参数的核心作用与影响1.2 线程池大小计算模型1.3 动态调优实践 二、Keep-Alive机制配置缺陷2.1 Keep-Alive的工作原理2.2 典型配置问题与影响2.3 优化配置建议 三、负载均衡策略缺失3.1 负载均衡的核心价值3.2 主流负载均衡算法对…

15个AI模拟面试平台 和 简历修改 / 真人面试平台

对15个AI模拟面试平台的详细分析&#xff0c;每个平台都将按照统一的框架进行评估。 补充重要的&#xff1a; 【1】AMA interview 听说最好&#xff0c;最贵 1. Final Round AI 网址: https://www.finalroundai.com/ 功能深度剖析: Final Round AI 提供了一套全面的求职工具…

开始使用 Elastic AI Assistant for Observability 和阿里 Qwen3

这篇文章是继之前的文章 “在本地电脑中部署阿里 Qwen3 大模型及连接到 Elasticsearch” 的续篇。如果你还没有部署好自己的 Qwen3&#xff0c;那么请阅读之前的那篇文章来安装好环境&#xff0c;然后再继续今天练习。在今天的文章中&#xff0c;我们将展示如何结合 Qwn3 和 El…

稳定币技术全解:从货币锚定机制到区块链金融基础设施

引言&#xff1a;稳定币的技术定位 根据国际清算银行&#xff08;BIS&#xff09;2025年定义&#xff1a;稳定币是以法定资产或算法机制维持价值稳定的区块链代币&#xff0c;其本质是传统金融与加密技术的接口层。 核心价值&#xff1a;解决加密货币波动性问题 → 成为DeFi生态…

syncthing忘记密码怎么办(Mac版)?

一、问题描述 syncthing安装在Mac端&#xff0c;更改原同步文件夹的路径&#xff0c;需要重新设计同步文件&#xff0c;设置了密码且忘记密码。未看见忘记密码的选项。 网上查询解决方案&#xff0c;发现只能通过修改配置文件才能继续正常访问。但是并没有在建议路径中找到配置…

半导体FAB中的服务器硬件故障监控与预防全方案:从预警到零宕机实战

&#x1f4ca; 服务器硬件故障监控与预防全方案&#xff1a;从预警到零宕机实战 关键词&#xff1a;SMART监控 RAID预警 IPMI传感器 性能基线 Prometheus Zabbix 高可用架构 一、硬件故障前的7大预警信号&#xff08;附关联工具&#xff09; 故障类型关键指标监控工具预警阈值…

一分钟了解Transformer

一分钟了解Transformer A Minute to Know About Transformer By JacksonML 1. Transformer是什么&#xff1f; Transformer模型是一种神经网络&#xff0c;它通过学习上下文及其含义&#xff0c;跟踪序列数据中&#xff08;如本句中的单词&#xff09;中的关系。Transforme…

【Ubuntu学习】嵌入式编译工具链熟悉与游戏移植

目录 一、Ubuntu 系统编译 MININIM 源码 1. 环境准备与依赖配置 2. 编译 Allegro5.2.5 引擎 ​编辑 3. 编译 MININIM 源码 4. 故障解决 5. 打包与迁移 二、嵌入式平台编译实践 1. 树莓派 3B 编译 MININIM 2. Android 平台交叉编译 三、树莓派 3B 流水灯实验&#xf…

川翔云电脑全新上线:三维行业高效云端算力新选择

一、核心定位与优势 云端虚拟工作站服务 依托云端高性能 CPU/GPU 集群&#xff0c;提供远程桌面服务&#xff0c;支持普通设备运行专业软件。 按需付费模式&#xff1a;无需采购高端硬件&#xff0c;大幅降低成本投入。生态协同优势&#xff1a;与渲染 101 同属母公司&#…

百面Bert

百面Bert Q1. Bert与Transformer有什么关系 Bert是基于Transformer架构中的Encoder进行搭建的。 具体来说&#xff0c;Bert的核心组件是几个Encoder layer的堆叠。Encoder layer中&#xff0c;也是两个子层&#xff0c;分别是注意力层和intermediate层&#xff08;Bert中的叫…

Docker Compose与私有仓库部署

目录 一. Docker 重启策略 二. Docker Compose工具的应用 1. 什么是 Docker compose 2. Docker compose 的安装 3. 编辑文件格式及编写注意事项 4. docker-compose的基本用法 三. Harbor私有仓库 1. 什么是Harbor 2. Harbor 的优势 3. Harbor 的构成 四. 部署Harbor…

数字隔离器,如何扛起现代智能家电的电气安全“大旗”

随着现代社会生活节奏的不断加速&#xff0c;人们对于属于自己的休闲时间愈发珍视&#xff0c;而智能家居作为提升人类居家幸福感与舒适度的现代化产物&#xff0c;不仅能有效满足人们对高品质生活的追求&#xff0c;还能推动产业升级与经济增长&#xff0c;引导智能家电设备从…

mybatis3调用瀚高procedure报错(APP)

文章目录 环境文档用途详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5 文档用途 mybatis3调用瀚高procedure报错&#xff08;错误信息&#xff1a;调用过程请使用CALL&#xff09;的解决方案。 详细信息 客户项目中使用…

96道Docker 容器高频题整理(附答案背诵版)

简述什么是 Docker 容器&#xff1f; Docker容器是一个开源的应用容器引擎&#xff0c;它让开发者可以将他们的应用以及依赖包打包到一个可移植的容器中&#xff0c;然后发布到任何安装了Docker引擎的服务器上&#xff0c;包括流行的Linux机器、Windows机器等。Docker容器利用…