React Native - resizeMode ile dikey hizalama resmi "içerir" "içerir"

Question

Bir görüntüde bir "yeniden boyutlandırma" modu varsa, görüntüdeki ortadaki görüntüyü hizalayacak/haklı gösterecek gibi görünüyor, ancak görüntü içeriği esnek başlangıçta hizalanmış/gerekçelendirilmiş.

<Image resizeMode="contain" ...> 
<Text>Title</Text> 
</Image> 

Aşağıdaki ile görüntünün üstünde görünen metni görüyorum.

İçerdiği görüntüyü dikey olarak üst üste hizalamanın bir yolu var mı?

Answer 1

İstediğiniz dikey hizalamayı ayarlamak için Görüntünüzde stiller kullanmanız gerekir.

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}> 
      <Text style={styles.instructions}> 
      Hello ! 
      </Text> 
     </Image> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    }, 
    image: { 
    height: 500, 
    justifyContent: "space-around", // <-- you can use "center", "flex-start", 
    resizeMode: "contain",    //  "flex-end" or "space-between" here 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: 'white', 
    backgroundColor: "transparent", 
    fontSize: 25, 
    }, 
}); 

çalışan bir örneğin https://rnplay.org/apps/9D5H1Q bakın

Answer 2

Aşağıdaki kodu kullanarak CSS backgroundposition taklit başardı: Çünkü taşma

<View style={{ overflow: 'hidden' }}> 
    <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} /> 
</View> 

: View 'gizli' Resmin yüksekliği, görüntünün ekstra yüksekliğini görmeden ayarlanabilir. Yeniden boyutlandırma modu için 'içerme' yerine 'kapsayıcı' uygulamanız gerekir, aksi takdirde görüntünün yüksekliğini çok büyük olarak ayarlarsanız Görünüm kabı kadar geniş olmayan bir ortalanmış resim ile sonuçlanırsınız . Aşağıdaki örnekte, Resim yüksekliği (mavi noktalı çizgi), alttaki örnekden daha büyüktür ve bu nedenle görüntünün merkez çizgisi, görünümde daha düşük oturur. İkinci örnekteki görüntünün yüksekliğini (mavi noktalı çizgi) azaltarak, görüntünün merkez çizgisi görünümde yukarı gider.

Bu durumun mantıklı olduğunu umuyorum ve umarım kullanım durumunuz için çalışır; madene yaptı: D

Answer 3

ben aynı şeyi yapmak gerekiyordu. Bunu başarmanın en iyi yolu, görüntünün yüksekliğini veya genişliğini açıkça belirtmek oldu. Ardından, görüntünüzü başka bir bileşene sararak, resmin konumunu tam olarak kontrol etmek için justifyContent'i kullanabilirsiniz.

Her zaman resmin genişliğine veya yüksekliğine sahip olamayacağınız doğrudur. Ancak, oldukça sık (özellikle de resizeMode kullanıyor: 'içerir') bir boyuta göre yüksekliği veya genişliği ayarlamak istersiniz. Yüksekliğin görünümün genişliğine eşit olmasını istedim.

<View style={{ flex: 1, justifyContent: 'flex-start' }}> 
    <Image 
     source={{ uri: imagePath }} 
     resizeMode="contain" 
     style={{ height: vw(100) }} 
    /> 
</View> 

vw this cevap gelen bir yardımcı fonksiyonudur: İşte kullanılan bir çözümdür.

Answer 4

Ayarlanan diğer değerlerin bazılarını düzeltmeniz gerekir. Çoğu durumda genişlik sabit olsun. Ebeveyn esnek seçeneği ile dikkatli olun. Tasarımınızı değiştirebilir.