React Native'da görüntünün tam genişlikte en boy oranını koru

Etiketi ile ilgili bir sorum var. Bir görüntünün alignSelf kullanarak yaptığım tüm ebeveyni genişlemesini istiyorum: germek, ancak aynı zamanda yüksekliğin görüntünün en boy oranına göre olmasını istiyorum. Böyle bir şeyi nasıl başarabilirim?

Bu yüzden yüksekliği, Görüntü genişliğinin bir oranı olarak belirtmenin bir yolunu istiyorum.

22
Hala burada iyi bir cevap yok!
katma yazar Matt The Ninja, kaynak

6 cevap

bdv 'nin yaklaşımını seviyorum ve bu tür görüntüleri uygulamamın hemen her yerinde kullanıyorum. Bu yüzden, cihaz rotasyonunu desteklemek için onLayout kullanan bir bileşen oluşturdum.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

export default class FullWidthImage extends Component {
    constructor() {
        super();

        this.state = {
            width: 0,
            height: 0
        };
    }

    _onLayout(event) {
        const containerWidth = event.nativeEvent.layout.width;

        if (this.props.ratio) {
            this.setState({
                width: containerWidth,
                height: containerWidth * this.props.ratio
            });
        } else {
            Image.getSize(this.props.source, (width, height) => {
                this.setState({
                    width: containerWidth,
                    height: containerWidth * height/width
                });
            });
        }
    }

    render() {
        return (
            
                
            
        );
    }
}
</div> </div>

Bu şekilde kullanabilirsiniz:


Veya oranın böyle olduğunu biliyorsanız:


21
katma
Bu yaklaşım benim için çalıştı, teşekkürler!
katma yazar Jordan, kaynak

Aslında oldukça basit.

Image sınıfı, getSize yöntemine sahiptir. [1]

Diyelim ki aspectRatioImage için bir bileşen yarattığınızı ve componentWillMount ateşlendiğinde uygun değerleri hesapladığınızı varsayalım.

O zaman kodunuz şuna benzer:

componentDidMount() {
    Image.getSize(this.props.source.uri, (srcWidth, srcHeight) => {
      const maxHeight = Dimensions.get('window').height;//or something else
      const maxWidth = Dimensions.get('window').width;

      const ratio = Math.min(maxWidth/srcWidth, maxHeight/srcHeight);
      this.setState({ width: srcWidth * ratio, height: srcHeight * ratio });
    }, error => {
      console.log('error:', error);
    });
  }

Böylece, görüntü yüksekliği ve genişliği bileşeninizin durumunda kaydedilmiş olur.

 

[1] - https://facebook.github.io/react-native/docs/image.html#getsize

8
katma
Biri benimle payının ne için olduğunu paylaşabilir mi?
katma yazar bdv, kaynak
@MattParrilla, ne için kullanacağınıza biraz bağlı. Bir görüntüyü, ekranın herhangi bir yerinde bulunanlara çarpıncaya kadar “ölçeklendirmek” için kullanmak istediğinizi hayal edebiliyorum. Bu durumda devlet iyi yapacak. Statik bir görüntü göstermek için, o zaman sanırım sahne olarak geçmek daha mantıklı olur.
katma yazar bdv, kaynak
Çok teşekkürler, ancak görüntüleri verilen çerçevenin maksimum genişliğine ölçeklendirme konusunda nasıl gidebilirim?
katma yazar Michael Stokes, kaynak
Gönderinizi, yaptığım olumsuz oyumu kaldırabilmek için düzenledim. Görüntünün boyutlarının düzgün olduğunu düşünmedim (hala bundan emin değilim), ancak doktorların bu yaklaşımı önerdiğini gördüm.
katma yazar Matt Parrilla, kaynak
Görüntü hala ekranda ise bu yöntem işe yarar. Resmin getSize işleminin devam ettiği, kullanıcı diğer ekrana geçtiğinde sorunla karşılaştım, setState şimdi ayarlanmamış bir bileşenin değerine ayarlanmış. Image bileşeninin kendisinin yüksekliğini ebeveyinin genişliğine göre ölçeklendirmek için daha temiz bir yolu olmasını umuyordum. Yukarıdaki çözüm, sabit bir görüntü konumu için gerçekten iyi çalışıyor. Görüntüyü dinamik olarak yeniden boyutlandırırken bir FlatList'te boyutlandırma yaptığımızda, bileşenin bellek ayakizini azaltmak için ekranda olmayan herhangi bir öğeyi çıkardığı durumlarda çok fazla uyarıya yol açar.
katma yazar samw2k00, kaynak

Bunun gibi bir şey kullanabilirsiniz:




Lütfen görüntü konteynırında yüksekliği ayarlamak zorunda olduğunuzu unutmayın.

4
katma

Görüntü yüksekliğini genişlik/yükseklik oranına göre hesaplayabilirsiniz.

Görüntü orijinal olarak 200x100 ise, resizeMode'u germek üzere ayarladıktan sonra:

var deviceWidth: Dimensions.get('window').width;

...

myImage {
    width: deviceWidth,
    height: deviceWidth * 0.5
}

Belki de en iyi uygulama olmadığını biliyorum, ama diğer resimlerle belirli bir ilişkiyi sürdürmek için gereken her boyuttaki imge konusunda bana çok yardımcı oldu.

4
katma
Teşekkürler güzelim, cevap bu olmalı!
katma yazar haotang, kaynak

tepki-yerli-ölçeklenebilir resim kullanabilirsiniz. Aşağıdaki örnek işi yapacak:

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';

const image = '}} />;
2
katma
Süper kullanımı kolay!
katma yazar Matt Hudson, kaynak

Tipik olarak, aşağıdakilerin yapılması bize görüntünün en boy oranını korurken, oryantasyona bağlı olarak maksimum genişlik/yüksekliğe işlenen bir görüntü verecektir:

render(){
    return();
}

ResizeMode ile 'include'ı kullanma: Görüntüyü eşit şekilde ölçeklendirin (görüntünün en boy oranını koruyun), böylece görüntünün her iki boyutu (genişlik ve yükseklik) görüntünün karşılık gelen boyutuna eşit veya daha küçük olacak (eksi dolgu).

Güncelleme: * Maalesef, resizeMode’un Android için yerel olarak tepki özelliğini kullanırken özellikle 'içerir' ile ilgili ortak bir hata olduğu görünüyor: https://github.com/facebook/react-native/pull/5738 *

1
katma
Bu görüntünün üstünde ve altında bir ton boşluk verir? (iOS'ta)
katma yazar Matt The Ninja, kaynak
çözüm, sadece görüntüyü tüm ekrana sığdırmaya çalışmayı öneriyor, bu da sorunun ne anlama geldiği değil. Soru, orijinal görüntüyle aynı boyut oranına sahip görüntünün verilen genişliğe nasıl yeniden boyutlandırılacağı ile ilgilidir.
katma yazar samw2k00, kaynak