प्रतिक्रिया-मूल - दृश्य युक्त फिट छवि, पूरे स्क्रीन आकार

Question

मैं अपने विचारों में छवियों को फिट करने की कोशिश कर रहा हूं ताकि मेरे पास छवियों का एक निर्बाध ग्रिड हो। समस्या यह है कि resizeMode='contain' स्क्रीन की चौड़ाई या कम से कम कुछ उच्च स्तर के कंटेनर के लिए उपयुक्त प्रतीत होता है, मुझे छवियों को प्रत्येक सूची आइटम के आकार में फिट करने की आवश्यकता है।

शैलियों:

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'blue' 
    }, 

    item: { 
    flex: 1, 
    overflow: 'hidden', 
    alignItems: 'center', 
    backgroundColor: 'orange', 
    position: 'relative', 
    margin: 10 
    }, 

    image: { 
    flex: 1 
    } 
}) 

लेआउट:

<TouchableOpacity 
    activeOpacity={ 0.75 } 
    style={ styles.item } 
> 
    <Image 
    style={ styles.image } 
    resizeMode='contain' 
    source={ temp } 
    /> 
</TouchableOpacity> 

परिणाम (resizeMode='contain' के साथ):

यहाँ शैलियों और जिसके परिणामस्वरूप ग्रिड का एक बहुत ही बदसूरत उदाहरण है

परिणाम (resizeMode='cover' के साथ):

आप देख सकते हैं, cover एड छवियों बहुत बड़ा कर रहे हैं और पूरे स्क्रीन के रूप में के रूप में व्यापक हैं और तुरंत युक्त दृश्य में फिट नहीं है।

अद्यतन 1:

मैं के करीब एक परिणाम प्राप्त करने में सक्षम था कि मैं क्या पैमाने छवि को बदलने के लागू करने और केंद्र से यह सिकुड़ द्वारा की तलाश में हूँ:

परिणत:

transform: [{ scale: 0.55 }] 

जिसके परिणामस्वरूप लेआउट (मार्जिन या paddings के बिना):

Answer 1

मुझे Image की resizeMode गुणों का उपयोग करके काम करने का उदाहरण नहीं मिल सका, लेकिन क्योंकि छवियां सभी स्क्वायर होंगे, फ्लेक्सबॉक्स के साथ विंडो के आयामों का उपयोग करके ऐसा करने का एक तरीका है।

flexDirection: 'row', और flexWrap: 'wrap' सेट करें, तब वे सभी एक ही आयाम के रूप में तब तक लाइन अप करेंगे।

मैं इसे सेट अप here

https://snack.expo.io/HkbZNqjeZ

"use strict"; 

var React = require("react-native"); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TouchableOpacity, 
    Dimensions, 
    ScrollView 
} = React; 

var deviceWidth = Dimensions.get("window").width; 
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg"; 
var SampleApp = React.createClass({ 
    render: function() { 
    var images = []; 

    for (var i = 0; i < 10; i++) { 
     images.push(
     <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}> 
      <Image style={styles.image} source={{ uri: temp }} /> 
     </TouchableOpacity> 
    ); 
    } 

    return (
     <ScrollView style={{ flex: 1 }}> 
     <View style={styles.container}> 
      {images} 
     </View> 
     </ScrollView> 
    ); 
    } 
}); 

Answer 2

मुझे लगता है कि क्योंकि आप चौड़ाई और item के लिए ऊंचाई निर्दिष्ट नहीं किया है बस।

आप केवल एक पंक्ति में 2 छवियों करना चाहते हैं, तो आप फ्लेक्स उपयोग करने के बजाय कुछ इस तरह की कोशिश कर सकते हैं:

item: { 
width: '50%', 
height: '100%', 
overflow: 'hidden', 
alignItems: 'center', 
backgroundColor: 'orange', 
position: 'relative', 
margin: 10, 
}, 

यह मेरे लिए काम करता है, आशा है कि यह मदद करता है।

Answer 3

देखें के आयाम सेट और सुनिश्चित करें कि आपके छवि ऊंचाई के साथ स्टाइल है और 'अनिर्धारित' नीचे दिए गए उदाहरण की तरह लिए चौड़ाई सेट करें:

<View style={{width: 10, height:10 }} > 
     <Image style= {{flex:1 , width: undefined, height: undefined}}  
     source={require('../yourfolder/yourimage'} 
     /> 
    </View> 

यह सुनिश्चित करें कि आपकी छवि कर देगा तराजू और पूरी तरह से आपके विचार में फिट बैठता है।