React Navigation + TypeScript 错误:类型 'EventStackParams' 不满足约束 'Record<string, object |未定义>' [英] React Navigation + TypeScript Error: Type &#39;EventStackParams&#39; does not satisfy the constraint &#39;Record&lt;string, object | undefined&gt;&#39;

问题描述

我正在将 TypeScript 添加到我的 React Native/React Navigation 5 Navigator，但是在将 EventStackParams 添加到 createStackNavigator() 时遇到问题.

I'm adding TypeScript to my React Native/React Navigation 5 Navigator, but having an issue with Adding EventStackParams to the createStackNavigator().

我浏览了 React Native 5 Docs、StackOverflow 和 GitHub，但没有运气.我究竟做错了什么?以下是我的错误和代码

I've looked through the React Native 5 Docs, StackOverflow, and GitHub, but no luck. What am I doing wrong? Below is my error and the code

错误:

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.

Index signature is missing in type 'EventStackParams'.ts(2344)

Navigation.tsx:

// Imports: TypeScript Types
import { EventStackParams } from '../types/types';

// React Navigation: Stack Navigators
const RootStack = createStackNavigator();
const EventsStack = createStackNavigator<EventStackParams>();

// Events Navigator
const EventsNavigator = () => (
  <EventsStack.Navigator initialRouteName="Events">
    <EventsStack.Screen
      name="Events"
      component={Events}
      options={{
        title: '',
        headerShown: false,
      }}
    />

    <EventsStack.Screen
      name="EventDetails"
      component={EventDetails}
      options={{
        title: '',
        headerShown: true,
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
        },
      }}
    />
  </EventsStack.Navigator>
);

EventDetails.tsx

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

// Imports: TypeScript Types
import { ReduxState, EventStackParams } from '../../types/types';

// React Hooks: React Navigation
const route = useRoute<RouteProp<EventStackParams, 'EventDetails'>>();

Types.tsx:

// TypeScript Type: Event
export interface Event {
  eventTitle: string,
  eventDescription: string | null,
  eventStreet: string,
  eventLocation: string,
  eventLatitude: number,
  eventLongitude: number,
  eventDateStart: number,
  eventDateEnd: number,
  eventTimeStart: string,
  eventTimeEnd: string,
};

// TypeScript Type: Event Stack Params
export interface EventStackParams {
  Events: undefined,
  EventDetails: {
    item: Event,
  },
};

推荐答案

更新:

这是通过将 interface 更改为 type 来修复的.

This was fixed by changing the interface to type.

// TypeScript Type: Event Stack Params
export type EventStackParams = {
  Events: undefined,
  EventDetails: {
    item: Event,
  },
};

这篇关于React Navigation + TypeScript 错误:类型 'EventStackParams' 不满足约束 'Record<string, object |未定义>'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！