React native with typescript-如何使用@React navigation/native with typescript中的useRoute

我正试图从

route.params

获取我的incident对象，但我不知道如何使typescript识别此道具

以下是导航到myDetail页面并将incident传递到参数的功能：

const navigateToDetail = (incident: IncidentProps): void => {
    navigation.navigate('Detail', { incident });
  };

下面是详细页面代码的一部分，我试图从route.params获取此对象：

type IncidentRouteParams = {
  incident: IncidentProps;
}

const Detail: React.FC = () => {
  const navigation = useNavigation();
  const route = useRoute();

  const incident = route.params.incident;

我想我需要通过某种方式将这个意外路线图输入传递到const route=useRoute（）

提前谢谢

以下是出现错误的图像：

编辑：

我确实喜欢这样做，但我不知道这样做是否正确：

  const route = useRoute<RouteProp<Record<string, IncidentRouteParams>, string>>();

  const incident = route.params.incident;

constroute=useRoute（）；
const事件=route.params.incident；

昨天刚做了这件事

TLDR： 首先，您需要使用每个屏幕名称及其接收的参数定义一个类型：

type ParamList = {
  Detail: {
    incident: IncidentProps;
  };
};

然后在

RouteProp

中使用该参数和屏幕名称：

const route = useRoute<RouteProp<ParamList, 'Detail'>>();

constroute=useRoute（）；

---

以下是解释所有这些的文档

您还可以根据所需的ParamList创建一个类型，因此您只需将此类型导入组件并将RouteName作为参数传递

import { RouteProp } from '@react-navigation/native';

export type RootStackParamList = {
  Home: undefined;
  Feed: { sort: 'latest' | 'top' };
};

export type RootRouteProps<RouteName extends keyof RootStackParamList> = RouteProp<
  RootStackParamList,
  RouteName
>;

从'@react-navigation/native'导入{RouteProp}；
导出类型RootStackParamList={
家：未定义；
提要：{排序：'最新'|'顶部'}；
};
导出类型rootRouteProp=RouteProp<
RootStackParamList，
罗特奈
>;

用法：

export const Feed = () => {    
    const route = useRoute<RootRouteProps<'Feed'>>();
    return <Text>{route.params.sort}</Text>
}

export const Feed=（）=>{
const route=useRoute（）；
返回{route.params.sort}
}

这太复杂了。在TS中设置initialParams有一种更简单的方法

设立：

type StackParamList = {
  TheSource: { endpoint: string; type: string;};
  BenefitDetail: React.FC;
  ItineraryMain: {reFetch: boolean;};
  Today: React.FC;
};

const Stack = createStackNavigator<StackParamList>();

类型StackParamList={
源：{端点：字符串；类型：字符串；}；
BenefitDetail:React.FC；
巡回主站：{reFetch:boolean；}；
今天：React.FC；
};
const Stack=createStackNavigator（）；

然后在使用时：

const TheSourceRoute = (): React.ReactElement => {
  return (<StackNavigator id="TheSource" element={
    <Stack.Screen name="TheSource" component={WebviewModal} initialParams={{ endpoint: sourceUrl, type: 'directsource' }}
      options={{
        title: 'The Source',
      }}/>
  }/>
  );
};

const TheSourceRoute=（）：React.ReactElement=>{
返回(
);
};