प्रतिक्रिया मूल - आकार बदलने के साथ लंबवत संरेखण छवि "0"

Question

जब किसी छवि का आकार बदलना मोड "होता है" लगता है तो यह केंद्र में वास्तविक छवि को संरेखित/औचित्य साबित करता है, छवि सामग्री हालांकि फ्लेक्स स्टार्ट पर गठबंधन/उचित है।

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

निम्नलिखित के साथ मैं छवि के ऊपर दिखाई देने वाला टेक्स्ट देख रहा हूं।

क्या निहित छवि को लंबवत रूप से संरेखित करने का कोई तरीका है?

Answer 1

आपको अपनी छवि पर शैक्षिक संरेखण सेट करने के लिए शैलियों का उपयोग करने की आवश्यकता है।

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, 
    }, 
}); 

एक चल उदाहरण के लिए https://rnplay.org/apps/9D5H1Q देखें

Answer 2

मैं निम्नलिखित कोड का उपयोग कर सीएसएस backgroundPosition अनुकरण करने में सक्षम था:

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

अतिप्रवाह के कारण

: देखें पर 'छुपा' छवि की ऊँचाई छवि की अतिरिक्त ऊंचाई को देखे बिना समायोजित किया जा सकता है। आपको आकार बदलने के लिए 'कंटेनर' के बजाय उपयोगकर्ता 'कवर' की आवश्यकता होगी अन्यथा आप एक केंद्रित छवि के साथ समाप्त हो जाएंगे जो दृश्य कंटेनर के रूप में चौड़ा नहीं है यदि आप छवि की ऊंचाई को बहुत बड़ा सेट करते हैं ।

छवि ऊंचाई (नीली बिंदीदार रेखा) के नीचे दिए गए शीर्ष उदाहरण में नीचे उदाहरण से बड़ा है और इसलिए छवि की केंद्र रेखा दृश्य में कम बैठती है। दूसरे उदाहरण में छवि (नीली बिंदीदार रेखा) की ऊंचाई को कम करके, छवि की केंद्र रेखा दृश्य में बढ़ जाती है।

आशा है कि यह समझ में आता है और मुझे उम्मीद है कि यह आपके उपयोग के मामले के लिए काम करता है; यह मेरा के लिए किया था: डी

Answer 3

मैं एक ही बात करने के लिए की जरूरत है। इसे पूरा करने के लिए मुझे सबसे अच्छा तरीका स्पष्ट रूप से छवि की ऊंचाई या चौड़ाई देना था। फिर, अपनी छवि को किसी अन्य घटक में लपेटकर, आप छवि की स्थिति पर पूर्ण नियंत्रण रखने के लिए JustifyContent का उपयोग कर सकते हैं।

यह सच है कि आपके पास हमेशा छवि की चौड़ाई या ऊंचाई नहीं हो सकती है। हालांकि, अक्सर (विशेष रूप से resizeMode का उपयोग कर रहा है: 'युक्त') आप कुछ के सापेक्ष ऊंचाई या चौड़ाई निर्धारित करना चाहते हैं। मैं चाहता था कि ऊंचाई व्यूपोर्ट की चौड़ाई के बराबर हो।

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

VW एक सहायक समारोह है कि this जवाब से आता है: यहाँ समाधान है कि मैं प्रयोग किया जाता है।

Answer 4

आपको कुछ मूल्यों को ठीक किए बिना किसी अन्य को ठीक करने की आवश्यकता है। ज्यादातर मामलों में चौड़ाई तय करें। पैरेंट फ्लेक्स विकल्प के साथ सावधानी से रहें। यह आपके डिजाइन को बदल सकता है।