时间戳

首页 > 解决方案 > 常量 i = 新图像（）；不适用于 react-native iOS 和 Android

javascript - 常量 i = 新图像（）；不适用于 react-native iOS 和 Android

问题描述

我在 react-native 中遇到以下错误：

[Unhandled promise rejection: ReferenceError: Can't find variable: Image]
* src/utils/b64ToBlob.js:45:56 in Promise$argument_0

这是它失败的功能b64ToBlog.js：

export const getImageDimensions = (file) => new Promise((resolved) => {
  const i = new Image();
  i.onload = () => resolved(i);
  i.src = file;
});

在iOS和Android上，它都失败了const i = new Image();：

如何Image从 URL 提供或获取图像尺寸，或者如何Image在 react-native 中提供？

编辑

对于那些感兴趣的人，这是我的最终解决方案：

import { Platform, Image as ImageNative } from 'react-native';

export const getImageDimensions = (file) => new Promise((resolved) => {
  if (Platform.OS === 'web') {
    const i = new Image();
    i.onload = () => resolved(i);
    i.src = file;
    return i;
  } else {
    return getSizeNative(file).then(resolved);
  }
});

function getSizeNative(uri) {
  return new Promise((resolve, reject) => {
    ImageNative.getSize(uri, (width, height) => resolve({ width, height }), reject)
  })
}

标签： javascriptreactjsreact-nativeexporeact-native-android

解决方案

您显示的代码用于 DOMImage构造函数，而不是 React Native 的Image组件。

查看它的 API，看起来 React Native 的Image组件提供了一个getSize静态方法：

import { Image } from "react-native";

export const getImageDimensions = (file) => new Promise((resolved, reject) => {
    Image.getSize(
        file,
        (width, height) => resolve({width, height}),
        reject
    );
});

遗憾的是，文档似乎没有说明如何将大小报告给成功函数，因此您可能需要更深入地挖掘或尝试一下，看看会得到什么。...但是从随后发布在问题中的代码来看，它看起来像是将它们作为离散参数接收，所以我已经更新了上面的内容。

推荐阅读