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

react native使用TS实现路由

news 2025/9/15 17:51:28

一、入口文件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;