为什么我想在图像组件中添加自定义样式时出现此 ts 错误？

Question

我想添加自己的样式，否则我想添加 css 图像对象。但我得到这个错误：

No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Type 'false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | { ...; }' is not assignable to type 'StyleProp<ImageStyle>'.
      Type 'ViewStyle' is not assignable to type 'StyleProp<ImageStyle>'.
        Type 'ViewStyle' is not assignable to type 'ImageStyle'.
          Types of property 'overflow' are incompatible.
            Type '"visible" | "hidden" | "scroll" | undefined' is not assignable to type '"visible" | "hidden" | undefined'.
              Type '"scroll"' is not assignable to type '"visible" | "hidden" | undefined'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Type 'false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | { ...; }' is not assignable to type 'StyleProp<ImageStyle>'.ts(2769)
index.d.ts(3809, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(3809, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'

代码：

...
export interface IImageSlider {
  ImageStyle?: StyleProp<ViewStyle>;
}

<Image source={{uri: item.photo}} style={ImageStyle ?? s.image} resizeMode='contain' />

const s = StyleSheet.create({...})

错误出现在 style={...}

我做错了什么？

Answer 1

您必须使用 react-native 中的 ImageStyle，因为图像组件可以具有视图没有的道具

export interface IImageSlider {
  ImageStyle?: StyleProp<ImageStyle>;
}

为什么我想在图像组件中添加自定义样式时出现此 ts 错误？

Why I get this ts error when I want to add custom style to my image component?

typescript

reactjs

react-native