Question

我希望能够知道已经传递到<Image />的网络加载图片的实际尺寸我尝试使用onLayout来计算尺寸（从此处获取{ {3}}）但似乎在已经通过布局引擎推送之后返回已清理的大小。

我试着查看onLoadStart，onLoad，onLoadEnd，onProgress以查看是否有其他可用信息，但似乎无法解决任何这些问题。我已将它们声明如下：

  onImageLoadStart: function(e){
    console.log("onImageLoadStart");
  },

  onImageLoad: function(e){
    console.log("onImageLoad");
  },

  onImageLoadEnd: function(e){
    console.log("onImageLoadEnd");
  },


  onImageProgress: function(e){
    console.log("onImageProgress");
  },

  onImageError: function(e){
    console.log("onImageError");
  },

  render: function (e) {
    return (
      <Image
        source={{uri: "http://adomain.com/myimageurl.jpg"}}
        style={[this.props.style, this.state.style]}
        onLayout={this.onImageLayout}
        onLoadStart={(e) => {this.onImageLoadStart(e)}}
        onLoad={(e) => {this.onImageLoad(e)}}
        onLoadEnd={(e) => {this.onImageLoadEnd(e)}}
        onProgress={(e) => {this.onImageProgress(e)}}
        onError={(e) => {this.onImageError(e)}} />
    );
  }

感谢。

Answer 1

Image组件现在提供了一种静态方法来获取图像的大小。例如：

strsplit

Answer 2

这个答案现已过时。见比尔的答案。

Image.getSize(myUri, (width, height) => {this.setState({width, height});

旧答案（对旧版本的本地反应有效）

好的，我明白了。目前，这需要对React-Native安装进行一些修改，因为它本身不受支持。

我按照这个帖子中的提示让我这样做。 https://github.com/facebook/react-native/issues/494

主要是，更改RCTNetworkImageView.m文件：将以下内容添加到setImageURL

void (^loadImageEndHandler)(UIImage *image) = ^(UIImage *image) {
  NSDictionary *event = @{
    @"target": self.reactTag,
    @"size": @{
      @"height": @(image.size.height),
      @"width": @(image.size.width)
    }
  };
  [_eventDispatcher sendInputEventWithName:@"loaded" body:event];
};

然后编辑处理加载完成的行：

[self.layer removeAnimationForKey:@"contents"];
self.layer.contentsScale = image.scale;
self.layer.contents = (__bridge id)image.CGImage;
loadEndHandler();

替换

loadEndHandler();

与

loadImageEndHandler(image);

然后在React-Native中，您可以通过本机事件访问大小。来自onLoaded函数的数据 - 请注意文档当前说的函数是onLoad，但这是不正确的。对于v0.8.0，正确的功能如下：

onLoadStart
onLoadProgress
onLoaded
onLoadError
onLoadAbort

可以这样访问：

onImageLoaded: function(data){
    try{
        console.log("image width:"+data.nativeEvents.size.width);
        console.log("image height:"+data.nativeEvents.size.height);
    }catch(e){
        //error
    }
},
...
render: function(){
    return (
        <View style={{width:1,height:1,overflow='hidden'}}>
            <Image source={{uri: yourImageURL}} resizeMode='contain' onLoaded={this.onImageLoaded} style={{width:5000,height:5000}} />
        </View>
    );
}

注意事项：

我设置了一个大图像窗口并将其设置在1x1px的包装元素内，这是因为如果要检索有意义的值，图像必须适合内部。
调整大小模式必须为'contain'才能获得正确的尺寸，否则会报告约束尺寸。
图像尺寸与设备的比例因子成比例缩放，例如iPhone6（不是6 +）上的200 * 200图像将报告为100 * 100。我认为这也意味着它将在iPhone6 plus上报告为67 * 67，但我没有对此进行测试。
我还没有对GIF文件起作用，这些文件遍历桥的Obj-C侧的不同路径。我做完后会更新这个答案。
我认为目前有一个公关正在进行，但是直到它被包含在核心中，然后每次更新/重新安装时都必须对react-native安装进行此更改。

Answer 3

您可以使用Image组件中的resolveAssetSource方法：

doGet

Answer 4

TypeScript示例：

import {Image} from 'react-native';

export interface ISize {
  width: number;
  height: number;
}

function getImageSize(uri: string): Promise<ISize> {
  const success = (resolve: (value?: ISize | PromiseLike<ISize>) => void) => (width: number, height: number) => {
    resolve({
      width,
      height
    });
  };
  const error = (reject: (reason?: any) => void) => (failure: Error) => {
   reject(failure);
  };

  return new Promise<ISize>((resolve, reject) => {
    Image.getSize(uri, success(resolve), error(reject));
  });
}

React Native检索实际图像大小

4 个答案:

这个答案现已过时。见比尔的答案。

旧答案（对旧版本的本地反应有效）