百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

expo开发RN前,先看完这篇文章节省你的对里面Router的理解

ccwgpt 2024-10-15 08:53 205 浏览 0 评论

最近在开发一个React Native双端App,试了几个框架,最后还是敲定使用expo框架,这里先介绍一下这个框架。世博会 (expo.dev)

Expo的特点

  1. 简化开发环境
  2. 无需配置:Expo为开发者提供了预配置的开发环境,减少了设置React Native项目的复杂性。
  3. 快速启动:使用Expo CLI(命令行界面),您可以快速创建新项目并开始开发。
  4. 跨平台支持
  5. 一次编写,多处运行:Expo允许您使用JavaScript或TypeScript编写代码,然后将其打包成iOS或Android应用。
  6. 内置功能
  7. 广泛的API库:Expo提供了一整套丰富的API,包括对摄像头、地理位置、通知等功能的支持。
  8. 开箱即用的功能:许多常见的移动应用功能(如推送通知、离线数据存储等)都可以通过简单的API调用来实现。
  9. 实时预览
  10. 即时预览:使用Expo客户端应用,您可以在真实设备上实时查看应用的变化,而无需重新编译。
  11. 热重载:在开发过程中,Expo支持自动刷新,让您可以立即看到代码更改的效果。
  12. 发布与部署
  13. 轻松发布:您可以直接通过Expo发布应用到苹果App Store或Google Play商店。
  14. 云构建服务:Expo提供了自动化的云构建服务,使得构建过程自动化且简单。

进入文档我们安装最新版的expo

Bash
sql

代码解读

复制代码

npx create-expo-app@latest

从Vue或者React转到刚开始开发expo必然是有许多问号的,怎么main.js,index.HTML,app.tsx这几个文件都没有,更是无从下手来进行开发的。这里我直接给大家解惑:

在expo中的路由配置是框架会自动匹配的,Expo 版本为 50 或以上使用了 Expo Router,会自动使用/app下的index.js作为项目首页。所以App.js不再需要。

在app中便是我们页面的开发位置,我们需要创建那个页面直接创建便可以,默认导航'/'为index.tsx文件,而其他的文件的PathName是该的文件名。如果我们需要将一些页面做归类开发,直接创建一个文件夹即可,而这个文件夹的名字将也作为页面导航的一部分。

那为什么有的文件夹名是带()例如上图的(tabs),这是因为在expoz中可以存在布局路由

布局路由

默认情况下,路由会填充整个屏幕。在它们之间移动是没有动画的整页过渡。在原生应用程序中,用户希望标题和标签栏等共享元素在页面之间持续存在。这些是使用布局路由创建的。配置布局路由的便是_layout.tsx组件完成的。

而在我们真实的开发中并不是所有的页面都要使用同一个布局路由样式的,但是这个页面的归属应该是属于该部分的,Expo Router 支持为给定目录添加单个布局路由。如果需要多个布局路由而不修改 URL,则可以使用组。

可以使用 group syntax 阻止区段显示在 URL 中 。()这对于在不向 URL 添加其他区段的情况下添加布局非常有用。您可以根据需要添加任意数量的组。

群组还适用于组织应用程序的各个部分。在以下示例中,我们有 app/(app) 是主应用程序所在的位置,而 app/(aux) 是辅助页面所在的位置。这对于添加想要从外部链接到的页面很有用,但不需要成为主应用程序的一部分。

修改默认导向

这里是expo Router 自动为我们配置的路由配置。在这里也可以清楚的看到默认路由导向,记住同一路径下使用多个()括起来的不要多次创建index.tsx文件,这会导致入口index错乱,会按这里路由导向的默认首位来展示的,没有使用()的路径也只能有一个index.tsx文件。


原文链接:https://juejin.cn/post/7413218910248484899

相关推荐

FastUI:用Python构建高性能React应用,告别JavaScript

在现代Web开发中,前后端分离已经成为主流趋势。然而,前端开发往往需要深入掌握JavaScript和各种框架,这对于许多Python开发者来说是一个不小的挑战。今天,我们要介绍一个革命性的UI框架——...

Python + Flet 开发网站的最佳数据库模块组合

对于使用Python和Flet开发网站并需要数据库支持的应用,以下是推荐的模块组合方案。方案一:SQLite+SQLAlchemy(推荐轻量级方案)**适用场景**:中小型应用、单用户或...

前端程序员应该往全栈方向发展吗?还是坚守前端?

这是一个非常经典且重要的问题,几乎每一位走到职业生涯十字路口的前端程序员都会思考。它没有一个绝对的“正确答案”,但我们可以从多个维度来分析,帮你找到最适合你的那条路。简单来说,这不是一个“要不要”的...

Python交互仪表盘工具:Panel 进阶学习路线图

Panel作为Python生态系统中最强大的交互式仪表盘工具之一,其学习曲线既平缓又深远。这里我将为您构建一个系统化的进阶学习框架,包含实战项目和关键学习节点。1.现代化Web集成开发1....

PuePy:将Python带入浏览器的革命性框架

在现代网络开发中,JavaScript无疑是主导地位的编程语言。但最近,随着WebAssembly和PyScript的崛起,Python的使用场景逐渐扩展到了前端开发领域。PuePy应运而生,作为一...

不容易!找到一个python的超简易网站搭建神器

作者:清香客来源:Python技术相信很多学习python的酱友们,大部分和我一样是为了提升工作效率,但是在提升自己的工作效率时,也会想着做同样工作的同事能不能也用上自己写的脚本(视工作环境而定)...

PyWebView:用 Python 构建桌面应用的神器

作为一个Python开发者,我一直希望能找到一种简便的方法来构建桌面应用,而不是去学习诸如Electron这种重度依赖JavaScript的技术栈。就在我为桌面应用开发寻找替代方案时,遇到...

Python Django框架中级教程:深入探索Django的核心功能

在Python的Web开发领域中,Django框架以其强大的功能和高效的开发模式占据着重要地位。对于已经掌握了Django基础的开发者来说,进一步深入学习中级知识能让我们开发出更复杂、更强大的Web应...

【Python程序开发系列】使用Flask实现前后端分离(案例)

这是我的第398篇原创文章。一、引言随着web开发的不断发展,前后端分离已成为越来越流行的架构设计。Flask是一个轻量级的Pythonweb框架,非常适合用于构建API,然后配合前端框...

每天一个Python库:Flask超轻量Web框架,灵活高效!

为什么要学Flask?Flask是一个「微型但强大的」Web框架:极简上手,几行代码即可跑起来灵活扩展,想加啥加啥(RESTful、JWT、数据库…)文档齐全,适合入门API开发或快...

Python个人量化投资系统:后台搭建

独立搞量化系统的程序员最烦啥?重复造权限管理的轮子绝对排前三。技术老手用Python+PearAdminFlask两天搭出量化后台,实测开源框架真能省下80%基础工作量。开源后台框架选对,一人项目...

python后端学什么(python后端好找工作吗)

在当今数字化的时代,Python后端开发成为了众多开发者追逐的热门领域。那么,想要在这个领域崭露头角,我们究竟应该学些什么呢?学习Python后端开发需要掌握全栈技术栈,涵盖从基础语法到分布式...

Motia:重新定义后端与智能体整合的未来平台

在AIagent技术飞速发展的今天,我们拥有了诸如Dify、RAGFlow、LangChain等一系列优秀平台。然而,随着场景复杂度增加,开发者正面临一个共同问题:后端越来越碎片化,Agen...

Python数据校验不再难:Pydantic库的工程化实践指南

在FastAPI框架横扫Python后端开发领域的今天,其默认集成的Pydantic库正成为处理数据验证的黄金标准。这个看似简单的库究竟隐藏着哪些让开发者爱不释手的能力?本文将通过真实项目案例,带您解...

Python Flask 建站框架实操教程(flask框架网页)

下面我将带您从零开始构建一个完整的Flask网站,包含用户认证、数据库操作和前端模板等核心功能。##第一部分:基础项目搭建###1.创建项目环境```bash#创建项目目录mkdirfl...

取消回复欢迎 发表评论: