当前位置：首页 > news >正文

react native学习【9】——动态路由

news 来源：原创 2025/5/19 5:01:53

react native学习【9】——动态路由

- - - 1、进入终端
    - 2、动态路由dynamic router
    - 3、编写app/_layout.jsx布局文件
    - 4、创建动态路由
    - 5、完善index.jsx文件
    - 6、完善[id].jsx文件
    - - 扩展运算符...
    - 7、完整的index.jsx文件

1、进入终端

在这里插入图片描述

2、动态路由dynamic router

官方网站
视频中的举例：当我们点击待办事项，它会带我们进入一个页面——那个具体的待办事项，我们不需要为每个待办事项添加一个新的静态路由。动态是指我们可以添加一条可以处理的路线，我们要去的编辑界面，为其中任何一个给定的创建待办事项，我们将通过待办事项的ID传递给路由。

网上解释：

在软件开发中，动态路由是指在运行时根据不同的条件、参数或状态来动态地确定请求的处理路径，而不是在开发时就静态地固定好每个请求对应的处理逻辑和资源路径。以下是关于动态路由的详细介绍：

与静态路由的对比
- 静态路由：在开发阶段就明确地将每个请求路径与特定的处理函数、页面或资源进行一一映射。例如，在一个简单的静态网站中，/index.html 请求总是对应首页的静态页面文件，/about.html 请求对应“关于我们”页面的文件，这种映射关系在代码部署后不会改变。
- 动态路由：不会预先固定请求与资源的对应关系，而是根据请求中的某些动态因素来决定如何处理。比如在电商网站中，/product/:id 这样的路由，其中的 :id 是一个动态参数，不同的 id 值对应不同的商品详情页面，系统会根据实际传入的 id 值来动态地查询数据库、渲染商品详情等内容。
实现原理
- 通常在后端框架或前端路由管理库中，会有一套路由匹配机制。当请求到达时，会根据预定义的路由规则（包括路径模式、参数等）来解析请求路径，提取出其中的动态部分，然后结合这些动态信息来调用相应的处理逻辑或加载对应的资源。

3、编写app/_layout.jsx布局文件

export default function RootLayout() {return (<ThemeProvider><SafeAreaProvider><Stack screenOptions={{headerShown: false}}><Stack.Screen name="index"/>{/* 这将是我们的动态路线  然后有一个表示动态的文件：如果愿意的话，前往编辑待办事项的页面*/}<Stack.Screen name="todos/[id]"/></Stack></SafeAreaProvider></ThemeProvider>);
}

4、创建动态路由

在app文件夹下面

创建todos文件夹
在创建好的文件夹中，创建[id].jsx文件

接下里构建一个完整的组件、完整的页，先从最基础的开始。

import { useLocalSearchParams } from "expo-router";
import { View, Text, StyleSheet, Pressable, TextInput } from "react-native";export default function EditScreen() {const {id} = useLocalSearchParams();return (<View><Text>{id}</Text></View>)
}

5、完善index.jsx文件

当我们点击时，能够进入到这个动态路线页面。

const renderItem = ({item}) => (<View style={styles.todoItem}>{/* onPress能帮助我们导航到该动态路线长按才能切换待办事项 */}<Pressable onPress = {() => handlePress(item.id)}onLongPress={()=>toggleTodo(item.id)}><Text style={[styles.todoText, item.completed && styles.completedText]}>{item.title}</Text></Pressable><Pressable onPress={()=>removeTodo(item.id)}>{/* 复制删除图标的渲染代码并改变 */}<MaterialCommunityIcons name="delete-circle" size={36} color="red" selectable={undefined}/></Pressable></View>)

导入路由并定义使用

import { useRouter } from "expo-router";
export default function Index() {//还有其他的代码……
const router = useRouter();//还有其他的代码……
//  路由跳转const handlePress = (id) => {router.push(`/todos/${id}`);}
}

长按，会显示下划线；再次长按，下划线取消

在这里插入图片描述

点击，比如new todo，就会跳转

在这里插入图片描述

6、完善[id].jsx文件

添加更多需要的导入

import {useState, useEffect, useContext} from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { ThemeContext } from "@/context/ThemeContext";
import { StatusBar } from "expo-status-bar";
import { Inter_500Medium, useFonts } from "@expo-google-fonts/inter";
import { Octicons } from "@expo/vector-icons/Octicons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useRouter } from "expo-router";

完善代码主体部分

export default function EditScreen() {const {id} = useLocalSearchParams();const [todo, setTodo] = useState({});const router = useRouter();// 添加配色方案const {colorScheme, setColorScheme,theme} = useContext(ThemeContext);// 加载字体const[loaded, error] = useFonts({Inter_500Medium,});// 在id变化时，执行异步任务，获取存储的数据并设置状态useEffect(() => {const fetchData = async (id) => {try

react native学习【9】——动态路由

react native学习【9】——动态路由 1、进入终端2、动态路由dynamic router3、编写app/_layout.jsx布局文件4、创建动态路由5、完善index.jsx文件6、完善[id].jsx文件扩展运算符...7、完整的index.jsx文件1、进入终端 2、动态路由dynamic router 官方网站视频中的举例：当我们…...

编程日记 2025/5/19 5:01:53

[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署DeepSeek R1模型 — — 保姆级教程 DeepSeek R1是中国AI初创公司深度求索（DeepSeek）推出大模型DeepSeek-R1。作为一款开源模型，R1在数学、代码、自然语言推理等任务上的性能能够比肩OpenAI o1模型正式版，并采用MI…...

编程日记 2025/5/17 1:13:32

LeetCodehot 力扣热题100 验证二叉搜索树

class Solution {vector<int> nums; // 用来存储二叉树节点值的数组 public:bool isValidBST(TreeNode* root) {inorder(root); // 中序遍历二叉树，填充 nums 数组// 遍历 nums 数组，检查是否为严格递增序列for(int i0; i<nums.size()-1; i){…...

编程日记 2025/5/18 22:25:04

使用Kickstart配置文件封装操作系统实现Linux的自动化安装

使用Kickstart配置文件封装操作系统实现Linux的自动化安装创建ks.cfg配置文件可以使用已经安装完成的Linux操作系统中的/root目录下的anaconda.cfg配置文件注意，配置文件会因为kickstart的版本兼容性的问题导致无法安装报错需要在实际使用过程中删除某些参数 …...

编程日记 2025/5/13 23:09:10

前端开发架构师Prompt指令的最佳实践

前端开发架构师Prompt 提示词可作为系统提示词使用，可基于用户的需求输出对应的编码方案。本次提示词偏向前端开发的使用，如有需要可适当修改关键词和示例。推荐使用 Cursor 中作为自定义指令使用Cline 插件中作为自定义指令使用在力所能及的范围内使…...

编程日记 2025/5/18 9:59:42

flink判断两个事件之间有没有超时（不使用CEP）

1.为啥不使用cep呢，cep的超时时间设置不好配置化，无法满足扩展要求 2.超时怎么界定。A事件发生后，过了N时间，还没有收到B事件，算超时。代码如下： import com.alibaba.fastjson.JSONObject; import lombo…...

编程日记 2025/5/13 4:06:32

vue3+ts+vite+element plus设置日期时间禁止选择小于当前时间精确到时分秒

ts组件 // timeUtils.ts/*** 生成一个数组* param start* param end*/ export const makeRange (start: number, end: number): number[] > {const result: number[] [];for (let i start; i < end; i) {result.push(i);}return result; };/*** 限制今天之前的时间不…...

编程日记 2025/5/10 7:35:18

2025web寒假作业二

一、整体功能概述该代码构建了一个简单的后台管理系统界面，主要包含左侧导航栏和右侧内容区域。左侧导航栏有 logo、管理员头像、导航菜单和安全退出按钮；右侧内容区域包括页头、用户信息管理内容（含搜索框和用户数据表格）以及页…...

编程日记 2025/5/16 21:20:14

2025.2.8——二、Confusion1 SSTI模板注入|Jinja2模板

题目来源：攻防世界 Confusion1 目录一、打开靶机，整理信息二、解题思路 step 1：查看网页源码信息 step 2：模板注入 step 3：构造payload，验证漏洞 step 4：已确认为SSTI漏洞中的Jinjia2…...

编程日记 2025/5/18 3:48:51

Mysql 函数解析

文章目录一、模糊匹配【like】二、CASE函数1、简单case2、搜索case3、搜索case 聚合函数一、模糊匹配【like】一般形式为：列名 [NOT] LIKE ‘%关键字%’，示例如下： like %北京%列名包括北京的字样like ‘北京%’ 列名北京开头like ‘%北…...

编程日记 2025/5/19 4:57:57

Docker 部署 MongoDB | 国内阿里镜像

一、简易单机版 1、镜像拉取 docker pull registry.cn-hangzhou.aliyuncs.com/farerboy/mongo:8.0.5-rc1 2、运行镜像 docker run -it --name mongodb \ -e MONGO_INITDB_ROOT_USERNAMEmongoroot \ -e MONGO_INITDB_ROOT_PASSWORDmongoroot \ -v /wwwroot/opt/docker/mong…...

编程日记 2025/5/19 4:51:56

加速度计信号处理

【使用 DSP 滤波器加速速度和位移】使用信号处理算法过滤加速度数据并将其转换为速度和位移研究（Matlab代码实现）_加速度计滤波器-CSDN博客 https://wenku.baidu.com/view/622d38b90f22590102020740be1e650e52eacff9.html?_wkts_1738906719916&bdQ…...

编程日记 2025/3/17 5:55:32

Baumer工业相机堡盟相机的相机传感器芯片清洁指南

Baumer工业相机堡盟相机的相机传感器芯片清洁指南 Baumer工业相机1.Baumer工业相机传感器芯片清洁工具和清洁剂2.Baumer工业相机传感器芯片清洁步骤2.1、准备步骤2.2、清洁过程1.定位清洁工具2.清洁传感器3．使用吹风装置 Baumer工业相机传感器芯片清洁的优势设计与结…...

编程日记 2025/5/19 4:03:27

20240824 美团笔试

文章目录 1、单选题1.11.21.31.41.51.61.71.81.91.101.111.121.131.141.151.161.171.181.191.202、编程题2.12.2岗位：硬件开发工程师（嵌入式系统软件开发方向）题型：20 道单选题，2 道编程题题 1、单选题 1.1 C 语言中，如果输入整数 v 是 2 的幂，下面表达式中哪个会返…...

编程日记 2025/5/19 4:45:39

【扫描件PDF】如何批量识别扫描件PDF多个区域内容保存到Excel表格，基于WPF和腾讯OCR的详细解决方案

在很多实际业务场景中，需要对大量扫描件 PDF 中的特定区域内容进行识别并整理到 Excel 表格里，以下是一些常见的应用场景：物流运单扫描件 PDF 中包含发货人信息、收货人信息、货物信息等。批量识别这些区域内容到 Excel 表格，有助…...

编程日记 2025/5/19 4:24:14

Django开发入门 – 3.用Django创建一个Web项目

Django开发入门 – 3.用Django创建一个Web项目 Build A Web Based Project With Django By JacksonML 本文简要介绍如何利用最新版Python 3.13.2来搭建Django环境，以及创建第一个Django Web应用项目，并能够运行Django Web服务器。创建该Django项目需…...

编程日记 2025/5/19 4:51:56

C# OpenCV机器视觉:OSTU算法实现背景差分的自适应分割

在一个热闹的科技公司里，阿强是一个负责图像分析的员工。他的日常工作就是从各种复杂的图像中提取出有用的信息，可这可不是一件轻松的事情哦最近，阿强接到了一个艰巨的任务：要从一堆嘈杂的监控图像中分离出运动的物体&#xff0c…...

编程日记 2025/5/17 22:37:56

SIPp的参数及命令示例

以下是SIPp参数的分类表格整理，方便快速查阅和使用： SIPp 参数分类表格分类参数描述默认值示例基本参数-sc指定XML场景文件（客户端模式）无-sc uac.xml-sd指定XML场景文件（服务器端模式）无-sd uas.xml-i本…...

编程日记 2025/5/19 4:02:44

【Mac排错】ls: command not found 终端命令失效的解决办法

【TroubleShooting on Mac】ls: command not found 终端命令失效的解决办法 A Solution to Solve “Command not found” of Terminal on Mac 一直在使用心爱的MacBook Pro的Terminal，并且为她定制了不同的Profile。这样，看起来她可以在不同季节&…...

编程日记 2025/5/12 11:23:57

【OneAPI】通过网页预渲染让搜索引擎收录网页

API简介网页预渲染，适用于动态网页以及单页面的SEO，支持网页缓存。您无须更改代码即可让搜索引擎收录您的网页。只要将需要预渲染的页面转发的本接口即可。如果您使用Nginx作为网页服务器，推荐使用以下配置： #您的网站locat…...

编程日记 2025/5/17 21:50:24

51单片机（国信长天）矩阵键盘的基本操作

在CT107D单片机综合训练平台上，首先将J5处的跳帽接到1~2引脚，使按键S4~S19按键组成4X4的矩阵键盘。在扫描按键的过程中，发现有按键触发信号后(不做去抖动)，待按键松开后，在数码管的第一位显示相应的数字:从左至右&…...

编程日记 2025/5/18 3:22:16

git命令行删除远程分支、删除远程提交日志

目录 1、从本地通过命令行删除远程git分支2、删除已 commit 并 push 的记录 1、从本地通过命令行删除远程git分支 git push origin --delete feature/feature_xxx 删除远程分支 feature/feature_xxx 2、删除已 commit 并 push 的记录 git reset --hard 7b5d01xxxxxxxxxx 恢复到…...

编程日记 2025/5/13 17:17:20

05-多数元素

给定一个大小为 n 的数组 nums ，返回其中的多数元素。多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。方法一：哈希表法通过哈希表来记录每个元素出现的次数，…...

编程日记 2025/5/17 12:55:17

一个简单的Windows TCP服务器实现

初始化 WSADATA wsaData; SOCKET serverSocket, clientSocket; struct sockaddr_in serverAddr { 0x00 }; struct sockaddr_in clientAddr { 0x00 }; int clientAddrLen sizeof(clientAddr);if (WSAStartup(MAKEWORD(2, 2), &wsaData) ! 0) {printf("WSAStartup f…...

编程日记 2025/5/17 10:39:38

salesforce 中 Account 转移给新 Owner 后如何仅转移 Case，而不转移 Opportunity

在 Salesforce 中，当更改 Account Owner 时，系统默认会将所有相关的 Opportunities（商机） 和 Cases（案例） 也一并转移给新的 Account Owner。如果你希望仅转移 Case，而不转移 Opportunities&am…...

编程日记 2025/5/15 4:11:09

Spring Boot 中的日志配置

文章目录 Spring Boot 中日志配置的源码分析1. Spring Boot 日志框架的选择与自动配置2. 日志自动配置与默认行为3. 日志系统的核心组件：Logger 和 LoggerFactory4. 日志配置文件的解析配置日志级别配置日志输出格式和目标 5. 日志级别的控制自定义日志级别 6. 自定…...

编程日记 2025/5/18 18:01:54

[前端]CRX持久化

在 Chrome 扩展开发中，持久化保存数据通常使用 Chrome 的 storage API。storage API 提供了两种存储选项：local 和 sync。使用 local 存储的数据保存在本地浏览器中，只能在同一设备上访问。使用 sync 存储的数据可以在用户登录其 Google 帐户…...

编程日记 2025/5/15 20:34:34

绕组电感 - Ansys Maxwell 磁通链与电流

在本博客中，我将演示如何使用 Ansys Maxwell 中磁瞬态求解器的磁通链和电流结果来计算绕组电感。Ansys Maxwell 磁瞬态求解器在场计算中考虑了涡流效应，我将展示一种使用磁通链和电流结果来计算绕组电感的简单方法。实际上，电感是非线性的…...

编程日记 2025/5/18 4:03:17

ComfyUI 安装教程：macOS 和 Linux 统一步骤

本教程将详细介绍如何在 macOS 和 Linux 上安装 ComfyUI。我们将从安装 Anaconda 开始，到安装 PyTorch 和 ComfyUI，最后提供一些常见问题的解决方法。 macOS和linux安装步骤很相似可以按照1️⃣安装anaconda2️⃣安装python3️⃣torch4️⃣comfyui Co…...

编程日记 2025/5/15 15:25:47

SMTP和POP3协议

SMTP和POP3协议 SMTP（简单邮件传输协议）和POP3（邮局协议版本3）是电子邮件系统中用于发送和接收邮件的核心协议。以下是它们的详细说明： 1. SMTP（Simple Mail Transfer Protocol） SMTP和POP3分…...

编程日记 2025/5/14 7:24:47

【C语言】#define和typedef的区别

文章目录 1.define特点 2.typedef特点 1.define #define 是预处理器指令，用来进行宏定义。它在编译之前由预处理器处理，主要用于定义常量、简单的函数宏或者代码片段的替换。特点文本替换：#define 主要用于文本替换，在编译前…...

编程日记 2025/5/19 3:03:47

2025清华：DeepSeek从入门到精通.pdf（附下载）

本文是一份关于如何深入理解和使用DeepSeek技术的全面指南，由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队编撰。DeepSeek是一家中国科技公司，专注于通用人工智能（AGI）的研发，其开源推…...

编程日记 2025/5/16 21:50:25

Linux运维——用户管理

Linux用户管理一、Linux用户管理要点二、常用命令2.1、groupadd2.2、groupdel2.3、groupmod2.4、groups2.5、useradd2.6、userdel2.7、passwd2.9、su2.10、sudo2.10.1、给普通用户授权 sudo2.10.2、免密码授权 sudo 一、Linux用户管理要点创建用户组 - 使用 groupadd删除用…...

编程日记 2025/5/14 2:06:00

Redis持久化的两种方式：RDB和AOF

redis中的数据存储在缓存中，如果没有持久化的策略，Redis一旦宕机，那么将会导致数据丢失；因此redis提供了以下两种持久化方式：RDB和AOF 一般来说，大部分公司对这两种方式都是同时开启的一、RDB RDB策略全…...

编程日记 2025/5/17 6:31:07

百度高德地图坐标转换

百度地图和高德地图的侧重点不太一样。同样一个地名，在百度地图网站上搜索到的地点可能是商业网点，在高德地图网站上搜索到的地点可能是自然行政地点。高德地图api 在高德地图中，搜索地名，如“乱石头川”，该地名会出…...

编程日记 2025/5/13 22:48:10

LIMO：上海交大的工作 “少即是多” LLM 推理

25年2月来自上海交大、SII 和 GAIR 的论文“LIMO: Less is More for Reasoning”。一个挑战是在大语言模型（LLM）中的复杂推理。虽然传统观点认为复杂的推理任务需要大量的训练数据（通常超过 100,000 个示例），但本文展…...

编程日记 2025/5/18 4:05:24

Windows逆向工程入门之汇编环境搭建

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 Visual Studio逆向工程配置基础环境搭建 Visual Studio 官方下载地址安装配置选项(后期可随时通过VS调整) 使用C的桌面开发拓展可选选项 MASM汇编框架配置MASM汇编项目创建新项目选择空…...

编程日记 2025/5/12 15:57:04

Git安全回退历史版本

Git安全回退历史版本方法特点git revert保留所有中间提交历史，生成显式的反向提交，适合精确撤销特定提交。直接提交快速生成一个回退提交，无需处理多个撤销操作，适合简单回退到某个旧版本。 git revert 仅回退一个版本 git r…...

编程日记 2025/5/15 7:47:16

消费电子产品中的噪声对TPS54202的影响

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时，也能帮助其他需要参考的朋友。如有谬误，欢迎大家进行指正。一、概述在白色家电领域，降压转换器的应用非常广泛，为了实现不同的功能就需要不同的电源轨。TPS542…...

编程日记 2025/5/14 10:03:36

ASP.NET Core 外部向SignalR的Hub发消息

实现 Hub类中的方法只应该用于消息的发布，而不应该用来写业务逻辑，SignalR中客户端给服务器端传递消息的超时时间为30s，如果对Hub类中的方法的调用执行时间超过30s，程序就会报错。可以在MVC控制器、托管服务等外部向客户端推送消…...

编程日记 2025/5/14 13:21:19

Ubuntu 多版本 gcc 配置常用命令备忘

用的频率不高，总忘记具体参数 1，安装多版本 gcc 以 gcc-11 和12 为例： sudo apt-get install gcc-11 gcc-12 sudo apt-get install gcc-11 gcc-12 2，配置多版本 gcc gcc 与 g 一起配置进数据库中： sudo update-a…...

编程日记 2025/5/15 6:29:01

树形表查询方法

树形数据表在开发中会经常遇到,parentid字段为父结点ID，它是树型结构的标志字段。查询方法: 1.自连接查询如果树的层级固定可以使用表的自链接去查询，比如：我们只查询两级课程分类，可以用下边的SQL selectone.id …...

编程日记 2025/5/8 3:47:25

OpenStack-Train版-Allinone自动化部署脚本

一、环境准备操作系统：CentOS 7 或以上版本建议配置： CPU：8 核或以上内存：16 GB 或以上磁盘：500 GB 或以上网络配置： 确保虚拟机已配置静态 IP 地址确保虚拟机可以正常访问外部网络二、自动…...

编程日记 2025/5/16 17:21:00

[笔记] 汇编杂记（持续更新）

文章目录前言举例解释函数的序言函数的调用栈数据的传递总结前言举例解释 // Type your code here, or load an example. int square(int num) {return num * num; }int sub(int num1, int num2) {return num1 - num2; }int add(int num1, int num2) {return num1 num2;…...

编程日记 2025/5/18 22:55:12

Hono.js入门指南_从零开始构建Web应用

1. 引言项目背景与动机随着现代Web开发的快速发展，构建高效、轻量且易于维护的Web应用变得越来越重要。Hono.js作为一个轻量级的Node.js框架，以其简洁的API和高效的性能吸引了众多开发者。本文将带你从零开始，逐步构建一个功能齐全的Web应用，帮助你快速上手Hono.js。 …...

编程日记 2025/5/13 9:19:47

后盾人JS -- 模块化开发

开发模块管理引擎 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </he…...

编程日记 2025/5/14 15:55:01

python-leetcode 23.回文链表

题目： 给定单链表的头节点head,判断该链表是否为回文链表，如果是，返回True,否则，返回False 输入：head[1,2,2,1] 输出：true 方法一：将值复制到数组中后用双指针法有两种常用的列表实现&#…...

编程日记 2025/5/11 18:18:55

echarts 3d中国地图飞行线

一、3D中国地图 1. 一定要使用 echarts 5.0及以上的版本; 2. echarts 5.0没有内置中国地图了。点击下载 china.json； 3. 一共使用了四层地图。 （1）第一层是中国地图各省细边框和展示南海诸岛； （2）第二层是…...

编程日记 2025/5/17 14:10:49

Vivado IP之浮点数Floating-point

在Vivado的IP Catalog中搜索Floating-point即可找到该IP Operation Selection界面 1.绝对值，即result|A| 2.累加 3.两个浮点数的加法或者减法 4.两个浮点数进行比较 5.两个浮点数的除法 6.求指数，即e^A 7.定点数到浮点数的转化 8.浮点数转化为定…...

编程日记 2025/5/16 5:11:57

只需三步！5分钟本地部署deep seek——MAC环境

MAC本地部署deep seek 第一步:下载Ollama第二步:下载deepseek-r1模型第三步：安装谷歌浏览器插件第一步:下载Ollama 打开此网址：https://ollama.com/，点击下载即可，如果网络比较慢可使用文末百度网盘链接注：Ollama是…...

编程日记 2025/5/18 21:20:46

react native学习【9】——动态路由

1、进入终端

2、动态路由dynamic router

3、编写app/_layout.jsx布局文件

4、创建动态路由

5、完善index.jsx文件

6、完善[id].jsx文件

相关文章：