如何在 React-Native Fast-Image 组件 TypeScript 中不使用任何内容

Question

我有一个组件会显示一个图像，它会接收一个 url 和样式。

interface FastImageProps {
  styleComponent: StyleProp<ImageStyle> | StyleProp<ImageStyle>[];
  url: string;
}

export const FastImageComponent: React.FC<FastImageProps> = ({
  styleComponent,
  url,
}: any) => {

  return (
    <FastImage
      style={styleComponent}
      source={{
        uri: `WEB_PATH/${url}`,
        priority: FastImage.priority.normal,
        cache: FastImage.cacheControl.immutable,
      }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
};

它工作正常，但该组件正在使用任何。如果我删除任何，样式将有一条红线并显示这个

No overload matches this call.
  Overload 1 of 2, '(props: FastImageProps, context?: any): ReactElement<any, any> | Component<FastImageProps, any, any> | null', gave the following error.
    Type 'false | ImageStyle | RegisteredStyle<ImageStyle> | RecursiveArray<false | ImageStyle | RegisteredStyle<ImageStyle> | null | undefined> | StyleProp<...>[] | null | undefined' is not assignable to type 'StyleProp<ImageStyle>'.
      Type 'ImageStyle' is not assignable to type 'StyleProp<ImageStyle>'.
        Type 'import("PATH/node_modules/@types/react-native/index").ImageStyle' is not assignable to type 'import("PATH/node_modules/react-native-fast-image/dist/index").ImageStyle'.
          Types of property 'backgroundColor' are incompatible.
            Type 'string | unique symbol | undefined' is not assignable to type 'string | undefined'.
              Type 'unique symbol' is not assignable to type 'string | undefined'.
  Overload 2 of 2, '(props: PropsWithChildren<FastImageProps>, context?: any): ReactElement<any, any> | Component<FastImageProps, any, any> | null', gave the following error.
    Type 'false | ImageStyle | RegisteredStyle<ImageStyle> | RecursiveArray<false | ImageStyle | RegisteredStyle<ImageStyle> | null | undefined> | StyleProp<...>[] | null | undefined' is not assignable to type 'StyleProp<ImageStyle>'.
      Type 'ImageStyle' is not assignable to type 'StyleProp<ImageStyle>'.
        Type 'import("PATH/node_modules/@types/react-native/index").ImageStyle' is not assignable to type 'import("PATH/node_modules/react-native-fast-image/dist/index").ImageStyle'.ts(2769)
index.d.ts(77, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & FastImageProps'
index.d.ts(77, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & FastImageProps & { children?: ReactNode; }'

这是我如何调用我的组件

<FastImageComponent
 styleComponent={{width: sizeWidth(20), height: sizeWidth(20)}}
 url={imageUrl}/>

谁能向我解释为什么会这样？以及我需要进行哪些更改才能使组件不使用任何组件。

Answer 1

好的，我找到了答案。我无法使用“react-native”中的 ImageStyle。

我需要像这样手动声明它

export interface ImageStyle {
  backfaceVisibility?: 'visible' | 'hidden';
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  overlayColor?: string;
  tintColor?: string;
  opacity?: number;
}

当我删除any时，它现在不会显示错误。

Answer 2

似乎您可以从 react-native-fast-image 导入 ImageStyle 并改用它。