Реальный исходный выбор фактических размеров изображения

Я хотел бы иметь возможность узнать фактический размер загруженного по сети изображения, которое было передано в <Image/> Я пытался использовать onLayout для определения размера (как взято здесь https://github.com/facebook/реагировать-родной/проблемы/858) но это, кажется, возвращает очищенный размер после того, как он уже был передан через механизм макета.

Я попытался заглянуть в 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)}} />
    );
  }

Благодарю.

ОТВЕТЫ

Ответ 1

Image компонент теперь предоставляет статический метод для получения размера изображения. Например:

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

Ответ 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' чтобы вы могли получить правильные размеры, в противном случае будет сообщено об ограниченном размере.

  • Размеры изображения масштабируются пропорционально масштабному коэффициенту устройства, например, изображение 200 * 200 на iPhone6 (не 6 плюс) будет отображаться как 100 * 100. Я предполагаю, что это также означает, что на iPhone6 plus он будет отображаться как 67 * 67, но я не проверял это.

  • Я еще не получил это, чтобы работать для файлов GIF, которые пересекают другой путь на стороне моста Obj-C. Я обновлю этот ответ, как только я это сделаю.

  • Я полагаю, что в данный момент существует PR для этого, но до тех пор, пока он не будет включен в ядро, это изменение будет необходимо вносить в реактивную установку каждый раз, когда вы обновляете/переустанавливаете.

Ответ 3

Вы можете использовать метод resolveAssetSource из компонента Image:

import picture from 'pathToYourPicture';  
const {width, height} = Image.resolveAssetSource(picture);

Ответ 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));
  });
}