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.Navigator
      initialRouteName="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,如果有问题或者建议,欢迎提问。

相关推荐
摸鱼仙人~15 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
wen's1 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一生躺平的仔1 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE1 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
朝阳391 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
前端拿破轮1 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林1 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript
奋飛2 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
冰冷的bin2 天前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3911 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native