React Native TypeScript项目中更简洁的Navigation处理方法咨询

针对你在React Native CLI的TypeScript项目里遇到的导航类型冗余问题，这里提供几种更简洁的处理方式：

1. 定义全局类型别名复用导航类型 #

先统一管理栈的参数和导航类型，避免每个组件重复书写冗长的类型声明：

步骤1：创建导航类型文件 #

新建navigation/types.ts，定义栈的参数和导出复用类型：

import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';

// 定义所有页面的参数类型，key对应页面name，value对应参数结构
type RootStackParamList = {
  Home: undefined; // Home页面无需参数
  Profile: { name: string }; // Profile页面需要name参数
};

// 导出页面Props的类型别名，自动包含navigation和route的正确类型
export type RootStackScreenProps<T extends keyof RootStackParamList> = NativeStackScreenProps<RootStackParamList, T>;

步骤2：在组件中使用 #

// HomeScreen
import { RootStackScreenProps } from './navigation/types';

const HomeScreen = ({ navigation }: RootStackScreenProps<'Home'>) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
    />
  );
};

// ProfileScreen
const ProfileScreen = ({ route }: RootStackScreenProps<'Profile'>) => {
  return <Text>This is {route.params.name}'s profile!</Text>;
};

2. 使用钩子替代Props传递导航/路由 #

直接用useNavigation和useRoute钩子获取实例，无需在组件Props中声明：

步骤1：定义全局参数类型（和方案1的RootStackParamList一致） #

步骤2：组件中使用钩子 #

// HomeScreen
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import type { RootStackParamList } from './navigation/types';

const HomeScreen = () => {
  // 指定当前页面的导航类型
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList, 'Home'>>();
  
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
    />
  );
};

// ProfileScreen
import { useRoute } from '@react-navigation/native';
import type { RouteProp } from '@react-navigation/native-stack';
import type { RootStackParamList } from './navigation/types';

const ProfileScreen = () => {
  // 指定当前页面的路由参数类型
  const route = useRoute<RouteProp<RootStackParamList, 'Profile'>>();
  return <Text>This is {route.params.name}'s profile!</Text>;
};

这种写法完全摆脱了Props中的导航类型声明，代码更清爽，同时保留TypeScript的类型校验。

3. 快速简化：利用Stack实例推导类型 #

如果不想额外创建类型文件，也可以直接从你创建的Stack实例中推导类型：

// 假设Stack是你创建的导航实例
const Stack = createNativeStackNavigator();

// 从Stack中获取参数列表类型
type RootStackParamList = React.ComponentProps<typeof Stack.Navigator>['screenOptions'];

// 组件中直接使用
const HomeScreen = ({ navigation }: React.ComponentProps<typeof Stack.Screen>['component']) => {
  // ...
};

不过这种方式的类型安全性略低，适合快速调试或小型项目使用。

内容的提问来源于stack exchange，提问作者Aerith