React Native FlatList、样式化组件和 Typescript

Question

我正在与 styled-components 、 FlatList 和 typescript 进行一场历史性的战斗...... 到目前为止，我已经能够使其与以下内容一起工作：

const StyledList = styled(FlatList as new () => FlatList<ItemType>)<CustomProps>(props => ({
  .......
}));

这种方法工作得很好，直到我最近进行了项目升级，它打破了这种方法。 我现在有以下依赖版本：

"typescript": "~4.3.5"

"styled-components": "^5.3.3"

"react-native": "0.64.3"

错误是这样的：

Property 'data' does not exist on type 'IntrinsicAttributes & { ref?: Ref<FlatList< ItemType >> | undefined; key?: Key | null | undefined; } & { theme?: DefaultTheme | undefined; } & { ...; } & { ...; }'.

任何人都可以对此提供任何见解吗？最新版本的

styled-components

或

react-native

可能发生了哪些变化，导致原始解决方法无法正常工作？

Answer 1

import { FlatList, FlatListProps } from 'react-native';
    
const List = styled(FlatList as new (props: FlatListProps<ItemType>) => FlatList<ItemType>)``;

它对我有用。

Answer 2

已经有一段时间了，但我找到了一种方法，可以使其与自定义道具一起使用并保留原始行为。

type FlatListContainerProps<T> = FlatListProps<T> & {
  $noBorder?: boolean;
};

const ExtendedFlatList = <T,>({ $noBorder, ...props }: FlatListContainerProps<T>) => {
  return <FlatList {...props} />;
};

export const FlatListContainer = styled(ExtendedFlatList)<FlatListContainerProps<any>>`
  border-radius: 20px;
  border-width: ${({ $noBorder }: FlatListContainerProps<any>) => ($noBorder ? 0 : "1px")};
  border-color: #f2f2f2;
  background-color: "green";
` as unknown as typeof ExtendedFlatList;

我希望这对你有帮助。