react native使用TS实现路由

一、入口文件app.jsx的配置

       入口文件最好还是要保留jsx

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from "./src/views/RootNavigation";const App = () => {return(<NavigationContainer ref={navigationRef}><StackRouter /></NavigationContainer>)
}

二、HomeScreen自定义你的tabbar导航

一般情况下项目里都是自定义的tababr,每个项目不一样,我这里就不过多展示

三、在应用的任何地方使用的导航功能

import { createNavigationContainerRef } from "@react-navigation/native";
export const navigationRef = createNavigationContainerRef();
export function navigate(name, params) {if (navigationRef.isReady()) {navigationRef.navigate(name, params);}
}

四、配置router.tsx和types.tsx

        router.tsx

 首先tababr页面可以用const的方式引入,其他页面可以用lazy的方式懒加载引入

核心代码

import { createNativeStackNavigator } from "@react-navigation/native-stack";const Stack = createNativeStackNavigator<RootStackParamList>();export default function StackRouter() {return (//示例<Stack.NavigatorinitialRouteName="HomeScreen"screenOptions={{ headerShown: false }}><Stack.Screen name="HomeScreen" component={HomeScreen} /></Stack.Navigator>
)}

types.tsx

核心代码

import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';export type RootStackParamList = {HomeScreen: undefined;Search: undefined;NpcMessage: undefined;Interactive: undefined;Example: { data: Array<string> }; //示例// 新添加的路由及其参数也应该在这里定义
};//需要用参数的时候需要导出一个 RouteProp
//需要用到页面跳转的时候,需要导出一个StackNavigationProp
//如果两者都需要,就需要导出两个
//import { useNavigation ,useRoute } from '@react-navigation/native'; 目标页面useNavigation是导航,useRoute是route//定义Interactive页面路由跳转
export type InteractiveNavigationProp = StackNavigationProp<RootStackParamList, 'Interactive'>;
export type InteractiveRouteProp = StackNavigationProp<RootStackParamList, 'Interactive'>;
// 定义Example页面的路由参数类型
export type ExampleRouteProp = RouteProp<RootStackParamList, 'Example'>;
// 更多类型定义...

五、页面中使用

import { useNavigation, useRoute } from '@react-navigation/native';
import { InteractiveNavigationProp,InteractiveRouteProp } from '../../router/types'const Interactive = () => {const navigation = useNavigation<InteractiveNavigationProp>();const router = useRoute<InteractiveRouteProp>}export default Interactive;

原本我们项目是js,由于最近在学TS,就在项目上慢慢局部引入TS,如果有问题或者建议,欢迎提问。

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

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

相关文章

递增三元组 刷题笔记

题意为 若存在 a中的数小于b中的数&#xff0c;b中的数小于c中的数 则该数算一种方案 思路 暴力模拟优化 两层循环遍历即可 从b到c的过程我们发现 第三层并不需要循环 直接加上 大于b的数量即可 那么第一层和第三层是对称的 我们有没有可能再去掉一层循环 只做一次遍历 …

238.除自身以外数组的乘积

题目&#xff1a;给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且…

java后端修改日期格式

有了他再也不用加JsonFormat了 第一步继承WebMvcConfigurationSupport类 实现其中方法 package com.sky.config;import com.sky.interceptor.JwtTokenAdminInterceptor; import com.sky.interceptor.JwtTokenUserInterceptor; import com.sky.json.JacksonObjectMapper; impo…

JS原型链的面试题

题目1 function Person(name) {this.name name; }Person.prototype.greet function() {console.log(Hello, my name is this.name); };function Student(name, grade) {Person.call(this, name);this.grade grade; }Student.prototype Object.create(Person.prototype);…

linux系统容器搭建redis集群

容器搭建redis集群 安装redis集群三主三从redis集群搭建主从容错切换迁移数据读写存储容错切换迁移 主从扩容主从缩容 安装redis集群 三主三从redis集群搭建 cluster集群模式 哈希槽分区进行亿级数据存储关闭防火墙&#xff0c;启动docker systemctl start docker新建6个redi…

高项--价值驱动的项目管理知识体系

说要参加软考已经过去两周了&#xff0c;到现在也没啥成果&#xff0c;今天决定还是动手记录小一些东西吧&#xff0c;也方便下次打开手机的时候可以查看记忆。总体上看可以分为三个部分&#xff1a;信息技术、项目管理、法律法规&#xff0c;而项目管理里面最终要的就是这个项…

Oracle 12c dataguard查看主备库同步情况的新变化

导读 本文介绍Oracle 12c dataguard在维护方面的新变化 前提&#xff1a;主库备库的同步是正常的。 1、主库上查看archive Log list SYScdb1> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive destination…

JMM(Java Memory Model)内存模型

Java内存模型&#xff0c;规范了计算机内存与java虚拟机之间的协调工作&#xff0c;即规定了 将java 虚拟机中的变量存储到内存中和从内从中取出来的内存细节。 Java内存模型中规定了所有的变量都存储在内存中&#xff0c;每条线程还有自己的工作内存&#xff0c;线程对变量的…

【SpringCloud微服务实战03】Nacos 注册中心

一、Nacos安装 官方文档安装Nacos教程:Nacos 快速开始 这里安装的是1.4.7版本,安装之后访问http://127.0.0.1:8848/nacos 管理界面如下:(用户名:nacos,密码:nacos) 二、Nacos服务注册和发现 1、在父工程中配置文件pom.xml 中添加spring-cloud-alilbaba的管理依赖:…

如何快速制作电商效果图?

我们都知道&#xff0c;做电商&#xff0c;你的产品效果是很重要&#xff0c;有些产品只要看一眼&#xff0c;消费者就想着加入购物车或者购买。 想快速制作电商效果图&#xff0c;我们可以借助以下几个方法。 1、使用电商模版 网上有很多免费和付费的电商效果图模板,&#x…

基于RK3588+Codesys+Xenomai的ARM+LINUX实时硬件平台的软PLC解决方案

产品概述 公司推出基于瑞芯微RK3588架构的AI边缘计算主板&#xff0c;RK3588是新一代国产旗舰高性能64位八核处理器&#xff0c;采用8nm工艺&#xff0c;具有高算力、低功耗、超强多媒体、丰富数据接口等特点。搭载四核A76四核A55的八核CPU和ARM G610MP4 GPU&#xff0c;内置6…

顺序表详解

顺序表是最简单的一种数据结构之一&#xff0c;它的本质上就是数组&#xff0c;我们将顺序表分为静态和动态的两种形式&#xff0c;静态顺序表只能存储有限个数据&#xff0c;而动态顺序表可以根据自己的需求来开辟空间存储数据。 下面是静态顺序表的结构&#xff0c;本质上就是…

一文了解Spring的SPI机制

文章目录 一文了解Spring的SPI机制Java SPIServiceLoader Spring SPISpringboot利用Spring SPI开发starter 一文了解Spring的SPI机制 Java SPI SPI 全称 Service Provider Interface &#xff0c;是 Java提供的一套用来被第三方实现或者扩展的接口&#xff0c;它可以用来启用…

vue 使用element plus 菜单时,折叠文字不消失

问题&#xff1a; 菜单折叠时&#xff0c;title文本无法消失&#xff0c;同时下拉箭头还会存在 解决方法&#xff1a; 查看项目中是否有div标签 原因 div和p标签都是块级元素&#xff0c;可能是这个原因 所以把项目中的p标签改为span标签 div改为template即可解决

IDEA编写各种WordCount运行

目录 一、编写WordCount(Spark_scala)提交到spark高可用集群 1.项目结构 2.导入依赖 3.编写scala版的WordCount 4.maven打包 5.运行jar包 ​6.查询hdfs的输出结果 二、本地编写WordCount(Spark_scala)读取本地文件 1.项目结构 2.编写scala版的WordCount 3.编辑Edit …

SSM整合项目(删除家居 + 分页查询)

1.删除家居 1.需求分析 2.编写Service层 1.FurnService.java 添加方法 //删除家居public void del(Integer id);2.FurnServiceImpl.java 实现方法 Overridepublic void del(Integer id) {furnMapper.deleteByPrimaryKey(id);}3.单元测试 Testpublic void del() {furnService.…

微信公众号调用沙箱支付

沙箱支付 登录支付宝开放平台&#xff0c;选择底部沙箱支付 下载密钥生成工具 生成应用私钥与公钥&#xff0c;上传沙箱支付&#xff0c;获得支付宝公钥 配置支付通知与支付回调地址 SpringBoot配置 yml文件 这里的地址必须与沙箱配置的一样 controller package com.zq…

植物病害识别:YOLO水稻病害识别数据集(11000多张,yolo标注)

YOLO水稻病害识别数据集&#xff0c;包含叶斑病&#xff0c;褐斑病&#xff0c;细菌性枯萎病&#xff0c;东格鲁病毒病4个常见病害类别&#xff0c;共11000多张图像&#xff0c;yolo标注完整&#xff0c;可直接训练。 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c…

第十五届蓝桥杯-UART接收不定长指令的处理

学习初衷&#xff1a; 不仅仅为了比赛&#xff01; 目录 一、问题引入 二、UART常用的三种工作模式 1.UART工作在中断模式 2.UART工作在DMA模式下 3.uart工作在接收转空闲的模式下 三、获取指令中需要的数据 四、printf函数的实现 一、问题引入 问题引入&#xff1a;请…

【Java】仓库管理系统 SpringBoot+LayUI+DTree(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…