Question

我正在尝试从route.params获取我的事件对象，但我不知道如何使打字稿识别该道具。

这是导航到我的 Detail 页面的功能，将事件传递给参数：

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;

我认为我需要通过某种 IncidentRouteParams 类型来传递 const route = useRoute（）

谢谢。

Here is the image with the error

编辑：

我确实喜欢这样，并且它起作用了，但是我不知道这是否是正确的方法：

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

  const incident = route.params.incident;

Answer 1

昨天刚刚这样做！

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

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

然后您在RouteProp中使用该参数和屏幕名称：

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

以下是解释所有https://reactnavigation.org/docs/typescript

的文档

Answer 2

您也可以根据您想要的 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
>;

用法：

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

Answer 3

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

设置：

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

const Stack = createStackNavigator<StackParamList>();

然后在使用时：

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

用打字稿反应本机-如何使用@ react-navigation / native中的useRoute与打字稿一起使用

3 个答案: