带有 typescript 和样式组件的RN平面列表

wwwo4jvm 于 2023-03-04 发布在 TypeScript

关注(0)|答案(5)|浏览(336)

SO社区，
我无法为在Typescript中使用Styled Components设置样式的RN FlatList确定正确的类型定义
我输入IProduct就像这样

interface IProduct {
  id: string;
  name: string;
}

我这样定义FlatList的类型

<FlatList
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

一切正常。Typescript没有抱怨，但只要我想这样设计FlatList

const StyledFlatList = styled.FlatList`
  background-color: 'white';
`;

<StyledFlatList
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

我有很多打字错误

No overload matches this call.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '({ item }: { item: IProduct; }) => JSX.Element' is not assignable to type 'ListRenderItem<unknown>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): 
ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '(item: IProduct) => string' is not assignable to type '(item: unknown, index: number) => string'.ts(2769)

index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'

index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'

有人能告诉我怎样修正那个错误吗？

typescript

来源：https://stackoverflow.com/questions/64460114/rn-flatlist-with-typescript-and-styled-components

5条答案

按热度按时间

xvw2m8pv1#

看起来将typeof添加到另一个建议的解决方案中以一种更直接的方式解决了这个问题，甚至允许您从props中排除类型：

const StyledFlatList = (styled.FlatList`
  background-color: 'white';
` as unknown) as typeof FlatList;

<StyledFlatList
  data={products}
  renderItem={({ item }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item) => item.id}
/>

赞(0）回复(0）举报 2023-03-04

jbose2ul2#

这个简单的解决方案对我很有效：

interface IProduct {
  id: string;
  name: string;
}

const StyledFlatList = styled(FlatList as new () => FlatList<IProduct>)`
  background-color: #f7f7f7;
`

赞(0）回复(0）举报 2023-03-04

6tr1vspr3#

我认为您只需要用，styled.FlatList '`通知泛型类型

import styled from 'styled-components/native';

const StyledFlatList = styled.FlatList<IProduct>`
  background-color: #f7f7f7;
`;

赞(0）回复(0）举报 2023-03-04

oprakyz74#

经过几次试错，我想我找到了一个解决方案，工程，但它不是理想的。

<StyledFlatList<any>
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <ProductCard product={item} onProductPress={handleOnProductPress} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

如果你觉得可以就告诉我。

- 更新1：**

如果我添加建议的代码片段Ben Clayton，prettier将这样格式化代码

const StyledFlatList = (styled.FlatList`
  background-color: ${colors.silver};
` as unknown) as FlatList;

我得到一个TS错误

JSX element type 'StyledFlatList' does not have any construct or call signatures.

- 更新2：**

我没有使用<any>，而是按照建议尝试了<React.ElementType>，here似乎也能正常工作。

<StyledFlatList<React.ElementType>
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <ProductCard product={item} onProductPress={handleOnProductPress} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

赞(0）回复(0）举报 2023-03-04

cwdobuhd5#

这是它如何为我工作，经过一些测试（并合并对这个主题的建议）：
在styles.ts中，我输入的FlatList以如下方式结束：

export const CustomFlatList = styled(FlatList as typeof FlatList<EstablishmentTransactionAntecipationDTO>)`
  flex: 1;
  width: 100%;
`;

赞(0）回复(0）举报 2023-03-04

我来回答

带有 typescript 和样式组件的RN平面列表

5条答案

相关问题

热门标签

最新问答