类型“string”不可分配给类型“ImageSourcePropType”

Question

背景 我正在尝试使用在

xlinkHref

标签内具有属性

Image

的 SVG 组件。该文件是一个普通的 SVG，但我使用

https://react-svgr.com/playground/?native=true

将其转换为 React Native 组件 (TSX)。我之前用相同的方法使用过非常简单的 SVG 图标，但没有一个具有

xlinkHref

属性。

问题

该组件在某个时候有一个

Image

标签，如下所示：

xlinkHref="data:image/png;base64,

，但是，紧接着它就有大约 474 行加密信息，或者至少我认为是这样。例如，这是第一行的前半部分：

iVBORw0KGgoAAAANSUhEUgAAAeUAAAJwCAYAAAC3c3kPAAAAAXNSR0IArs4c6QAAQABJREFUeAH

。 VS Code 自动将

xlinkHref

标记突出显示为不正确，并且我收到标题中提到的错误：

类型“string”不可分配给类型“ImageSourcePropType”。

下面的错误消息提到：

预期的类型来自属性“xlinkHref”，该属性在类型“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly & Readonly<...>”

上声明

我不是一个专业的程序员，无法理解错误试图告诉我什么，所以如果有人愿意解释一下，那就意义重大。

问题

是否可以在 React Native 中使用具有此类属性和赋值的 SVG 组件，或者它根本不兼容？我该如何解决它？这是一个已知问题还是我刚刚遇到了新的障碍？我在互联网上找不到有关此特定问题的任何内容。

提前非常感谢！

Answer 1

也许有一种更“TypeScripting”的方式来做到这一点。

/**
 * @see https://reactnative.dev/docs/image#source
 */
export type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequireSource;

/*
 * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSourcePropType.js
 */
export interface ImageURISource {
    /**
     * `uri` is a string representing the resource identifier for the image, which
     * could be an http address, a local file path, or the name of a static image
     * resource (which should be wrapped in the `require('./path/to/image.png')`
     * function).
     */
    uri?: string | undefined;
    /**

正如我们所见，

ImageSourcePropType

继承了类型

ImageURISource

，它声明了一个名为

uri

的成员，因此具有

uri

属性的普通对象就可以完成这项工作。

所以：

<Image style={...somestyle} source={{ uri: ...the_path_to_your_image }}/>

Answer 2

这对我有用：

xlinkHref={'...' as any}

Answer 3

怎么样：

import { ImageSourcePropType } from 'react-native';
import SomeImage from '../assets/images/some.png';


// in component:

<Image source={SomeImage as ImageSourcePropType} />