छवि 'युक्त' resizeMode प्रतिक्रिया मूल में काम नहीं कर रहा है

Question

मैं एक वास्तविक एंड्रॉइड डिवाइस पर प्रतिक्रिया मूल का उपयोग कर रहा हूं। जब सिर्फ निम्नलिखित मुख्य अनुप्रयोग घटक पर समारोह प्रस्तुत करना के साथ एक बहुत आसान एप्लिकेशन ...

render() { 
    <Image 
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}} 
    style={ 
     { 
     flex: 1, 
     resizeMode: 'contain', 
     backgroundColor: 'yellow' 
     }   
    } /> 
} 

मैं अपने डिवाइस पर निम्न परिणाम प्राप्त बनाने:

आप पूरी पृष्ठभूमि देख सकते हैं पीला है इसलिए हमें बताता है कि छवि तत्व वास्तव में पूरे स्क्रीन आकार ले रहा है। लेकिन यह सिर्फ गलत प्रस्तुत किया गया है। 'कवर' आकार बदलें मोड अपेक्षा के अनुसार काम करता है (और 'खिंचाव' मोड भी करता है)। यह 'कंटेनर' मोड है जो काम नहीं कर रहा है (मेरे दृष्टिकोण से सबसे महत्वपूर्ण एक)। छवि सूची को दिखाने पर भी समस्या खराब हो जाती है क्योंकि छवि भी दिखाई नहीं देती है।

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

अद्यतन 2 अच्छी खबर। अब मैं रिएक्ट नेटिव v0.24.1 का उपयोग कर रहा हूं और ऐसा लगता है कि छवि 'कंटेनर' मोड अब अपेक्षित काम करता है, भले ही वास्तविक छवि आकार उसके कंटेनर से छोटा हो। ज़्वोना का समाधान अच्छा है (हालांकि आपको यह ध्यान में रखना होगा कि ऑनआउट आपको छवि दृश्य आकार देगा जिसमें छवि प्रस्तुत की गई है, लेकिन वास्तविक छवि आकार लोड नहीं किया जा रहा है)। अभी तक, मुझे वास्तविक छवि आकार का पता लगाने के किसी भी तरीके से पता नहीं है (मान लीजिए कि आप नेटवर्क संसाधन से छवि को पुनर्प्राप्त कर रहे हैं और आप आकार को नहीं जानते हैं, जो आप गणना करना चाहते हैं तो बहुत महत्वपूर्ण हो सकता है इसका पहलू अनुपात)।

Answer 1

"युक्त" केवल आपकी छवि का आकार बदलता है जब छवि का आकार बड़ा उस कंटेनर से अधिक है जिसे आप फिट करने की कोशिश कर रहे हैं। इस मामले में, आपका कंटेनर पूर्ण स्क्रीन है। यूआरएल के माध्यम से आप जो छवि लोड कर रहे हैं वह रास्ता छोटा है, क्योंकि यह केवल 53 पिक्सेल से 53 है। तो यह आकार बदल नहीं होगा।

मुझे लगता है कि "कवर" करना चाहिए जो आप प्राप्त करने की कोशिश कर रहे हैं। हालांकि, छवि के आकार के कारण, यह बहुत अच्छा नहीं लगेगा जब इसे इस तरह बड़ा किया जाता है। एक यहाँ उदाहरण निर्मित:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} /> 

जहां:: सवाल का https://rnplay.org/apps/X5eMEw

Answer 2

मेरा जवाब को भाग अपडेट

onImageLayout: function(data){ 
    console.log('layout', data.nativeEvent.layout); 
} 

ये डिवाइस चौड़ाई + ऊंचाई, करने के लिए सानुपातिक किया जाना चाहिए कि कौन सा इसके साथ प्राप्त करें:

const { 
    Dimensions, 
    . 
    . 
    . 
} = React; 

const windowWidth = Dimensions.get('window').width; 
const windowHeight = Dimensions.get('window').height; 

और तुम चौड़ाई/शैलियों में प्रतिशत के रूप में ऊंचाई प्राप्त करने के लिए चाहते हैं, तो आप सिर्फ उदाहरण के लिए: परिभाषित .:

const styles = StyleSheet.create({ 
    image: { 
    width: windowWidth * 0.75, 
    height: windowHeight * 0.33 
    }   
}); 

Answer 3

यह वही नवीनतम प्रतिक्रिया देशी 0 से मेरे लिए काम किया है।37:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />