typescript - react native typescript 如何输入 FlatList

Question

我找不到在 React Native 中输入 FlatList 的方法

export interface Category {
  id: string;
  title: string;
  bg: string;
}
export const CATEGORIES: Category[] = [
  { id: "c1", title: "Italian", bg: "#f5428d" }
];


const Item = ({ data }: { data: Category }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{data.title}</Text>
  </View>
);
const CategoriesScreen = ({ navigation }: CategoriesScreenProps) => {
  const renderItem  = ({
    data,
  }: {
    data: Category;
  }) => <Item data={data} />;
  return (
    <FlatList
      data={CATEGORIES}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      numColumns={2}
    ></FlatList>
  );
};

我在 renderItem Prop 中遇到了这个错误:

No overload matches this call. Overload 1 of 2, '(props:FlatListProps | Readonly<FlatListProps>):FlatList', gave the following error.Type '({ data, }: { data: Category; }) => JSX.Element' is not assignable to type 'ListRenderItem'.Types of parameters '__0' and 'info' are incompatible.Property 'data' is missing in type 'ListRenderItemInfo' but required in type '{ data: Category;}'. Overload 2 of 2, '(props: FlatListProps, context:any): FlatList', gave the following error.Type '({ data, }: { data: Category; }) => JSX.Element' is not assignable to type 'ListRenderItem

请问有什么问题吗？

Answer 1

我知道这太老了，但我想我可能有您最终想要的解决方案。我认为我们必须完成相同的教程，因为我遇到了完全相同的问题和完全相同的输入问题。

如果我的理解正确，那么最终其他人在这里所说的在技术上是正确的； FlatList 使用的数据将是 ListRenderItem<T> .但是，ListRenderItem 包裹的个别数据项传递给您为 renderItem 定义的函数prop 实际上是 ListRenderItemInfo<T> 类型.所以，你应该能够像我输入的那样输入你的函数参数 itemData参数如下:

import { FlatList, ListRenderItemInfo } from "react-native"
import { CategoryGridTile } from "irrelevant"
import { CATEGORIES } from "irrelevant"
import Category from "irrelevant"

export const CategoriesScreen: React.FC = () => {
    return <FlatList
        data={CATEGORIES}
        keyExtractor={(item) => item.id}
        renderItem={renderCategoryItem}
    />
}

const renderCategoryItem = (itemData: ListRenderItemInfo<Category>) => {
    return <CategoryGridTile title={itemData.item.title} color={itemData.item.color} />
}

在哪里Category是:

class Category {
  constructor(id, title, color) {
    this.id = id
    this.title = title
    this.color = color
  }
}

我通过深入研究 FlatList 的定义发现了这一点及其类型:

export interface ListRenderItemInfo<ItemT> {
    item: ItemT;

    index: number;

    separators: {
        highlight: () => void;
        unhighlight: () => void;
        updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
    };
}

export type ListRenderItem<ItemT> = (info: ListRenderItemInfo<ItemT>) => React.ReactElement | null;

我相信你早就解决了这个问题，但希望它能帮助其他人处理同样的输入问题。