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

Question

我有一个组件，将显示一个图像，它将收到一个网址和风格。

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}
    />
  );
};

它工作正常，但组件正在使用任何。如果我删除any，样式将有一条红线，并显示以下内容

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- 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并使用它。