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

Posted 2023-03-13

【中文标题】如何在 React-Native Fast-Image 组件 TypeScript 中不使用任何内容

【英文标题】：How to not use any in React-Native Fast-Image Component TypeScript

【发布时间】：2021-05-28 15:53:43

【问题描述】：

我有一个组件会显示一个图像，它会接收一个 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/>

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

【参考方案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时，它现在不会显示错误。

【参考方案2】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。