如何从 React Native 上的 uri 获取图像高度和宽度？答案

【问题标题】：How to get image height and width from uri on React Native?如何从 React Native 上的 uri 获取图像高度和宽度？
【发布时间】：2017-01-19 07:14:01
【问题描述】：

所以，我尝试使用 React Native 提供的 Image.getSize 函数。但是当我尝试在函数之外使用高度和宽度时，它似乎为零。这是我的代码：

var theHeight = 0;
Image.getSize(url,(height, width)=>{
 theHeight = height;
})

console.log("test get height "+theHeight);

结果是

测试得到高度 0

我做错了什么？

【问题讨论】：

标签： reactjs react-native react-native-android

【解决方案1】：

您的代码存在两个问题。第一个是Image.getSize 异步调用它的回调。您需要将依赖于图像大小的代码放入回调中。

第二个问题是成功回调的参数是(width, height)，而不是相反。

你应该写：

Image.getSize(url, (width, height) => {
  console.log(`The image dimensions are ${width}x${height}`);
}, (error) => {
  console.error(`Couldn't get the image size: ${error.message}`);
});

【讨论】：

我知道，但是我如何在成功回调之外使用宽度和高度？
您可以将宽度和高度分配给回调之外的变量，只要您仅在回调完成后访问这些变量即可。
我试过你的代码，我意识到“console.log("test get height "+theHeight);"在回调完成之前调用。回调完成后如何更新var？
您可以像在任何其他代码或编程语言中那样设置回调中的变量，这里 React Native 没有什么特别之处。
我将代码放入回调中，它可以工作，但延迟很短

【解决方案2】：

这是我在 Redux Saga 中执行此操作的方法（我需要它阻塞直到它被竞争）：

const getImageSize = new Promise(
  (resolve, reject) => {
    Image.getSize(filePath, (width, height) => {
      resolve({ width, height });
    });
  },
  (error) => reject(error)
);

const { width, height } = yield getImageSize;

console.log(`width ${width}, height ${height}`);

您也可以使用 await（在异步函数中）调用 promise，以防万一其他人需要。

【讨论】：