expo-assets useAssets：类型 \'Asset\' 不可分配给类型 \'ImageSourcePropType\'

Question

按照 expo-asset's docs 提供的小示例，将元素从资产数组传递到 Image source prop 会出现以下打字稿错误：

No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Type 'Asset' is not assignable to type 'ImageSourcePropType'.
      Type 'Asset' is not assignable to type 'ImageURISource'.
        Types of property 'width' are incompatible.
          Type 'number | null' is not assignable to type 'number | undefined'.
            Type 'null' is not assignable to type 'number | undefined'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Type 'Asset' is not assignable to type 'ImageSourcePropType'.ts(2769)
index.d.ts(3783, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps>'
index.d.ts(3783, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps>'

我在 macOS 上使用 Node 版本 16.15.0、Yarn 版本 1.22.18 和 expo-cli 版本 5.4.7。

该问题可通过以下方式重现：

• 正在使用expo init 初始化一个新项目并选择blank (Typescript) 模板
• 用expo install expo-asset添加expo-asset@

package.json 看起来像这样（为了便于阅读，删除了脚本）：

{
  "name": "asset-test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
    "expo": "~45.0.0",
    "expo-asset": "~8.5.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "typescript": "~4.3.5"
  },
  "private": true
}

以及以下App.tsx：

import { StatusBar } from "expo-status-bar";
import { Image, StyleSheet, Text, View } from "react-native";
import { useAssets } from "expo-asset";

export default function App() {
  let [assets] = useAssets([require("./assets/icon.png")]);

  return (
    <View style={styles.container}>
      {assets ? <Image source={assets[0]} /> : null}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

提到的错误显示在第 (10, 24) 行（在 source prop 上）

我真的希望我做错了什么，因为在我看来，类型定义在某种程度上是不兼容的（如 Asset 类中的 width 属性应该用 undefined 而不是 null 来定义），所以我该如何解决？

Answer 1

正确的形式是使用带有 uri 键的对象。 像这样：

export default function App() {
  let [assets] = useAssets([require("./assets/icon.png")]);

  return (
    <View style={styles.container}>
      {assets ? <Image source={{ uri: assets[0].uri }} /> : null}
      <StatusBar style="auto" />
    </View>
  );
}