रिएक्ट नेटिव के स्क्रॉल व्यू को प्रारंभिक ज़ूम कैसे 1 नहीं बनाया जाए?

Question

मैं एक प्रतिक्रियात्मक मूल स्क्रॉलव्यू में सामग्री (एकाधिक छवियों को लंबवत व्यवस्थित) रखना चाहता हूं (केवल आईओएस केवल, एंड्रॉइड बाद में आएगा) जो फोन की स्क्रीन से बड़ा है, और ज़ूम आउट करना शुरू करें ताकि यह सब एक जैसा दिखाई दे पहर।

वहाँ एक componentDidMount कॉल कि ज़ूम आउट स्क्रीन में फिट करने के लिए सामग्री,

<ScrollView 
    style={{width: 500, height: 1000}} 
    // + whatever other properties make this work required way 
> 
    <View style={{width: 2000, height: 5000}}> 
    <Image style={{width: 2000, height: 2000}} source={.....}/> 
    <Image style={{width: 2000, height: 3000}} source={.....}/> 
    </View> 
</ScrollView> 

मैं 'zoomScale' संपत्ति की स्थापना की कोशिश की तरह कुछ में ScrollView.scrollResponderZoomTo का उपयोग कर के किसी भी अच्छे उदाहरण हैं, लेकिन यह लगता है ध्यान नहीं दिया जा और हमेशा मान 1

का उपयोग करता है इस मुद्दे (https://github.com/facebook/react-native/issues/2176) वहाँ एक scrollResponderZoomTo समारोह है कि इस्तेमाल किया जा सकता है, लेकिन जब मैं इसे इस्तेमाल करने की कोशिश, ऐसा लगता है कि कोई बात नहीं मान मैं इसे देना यह ज़ूम के अनुसार बहुत दूर और दूर केंद्र बाहर।

एफ 8 नमूना ऐप में ज़ूम करने योग्य छवि मॉड्यूल (https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/tabs/maps/ZoomableImage.js) है जो छवि को स्क्रीन फिट करने के लिए Image.resizeMode.contain शैली का उपयोग करता है, लेकिन यह छवि की गुणवत्ता खो देता है, इसलिए जब आप ज़ूम इन करते हैं तो यह धुंधला हो जाता है।

Answer 1

इस तरह से आप यह क्या करने का इरादा है, लेकिन एक संभव समाधान नहीं हो सकता है:

आप कर सकते हैं उपकरणों ऊंचाई और चौड़ाई (var {height, width} = Dimensions.get('window')) मिलता है और आप अपनी छवि का आकार पता है, ताकि आप आसानी से गणना कर सकते हैं की जरूरत है चौड़ाई और ऊंचाई, चलिए उन्हें var neededWidth, neededHeight; कहते हैं। फिर आप ज़ूम की गणना कर सकते हैं जिसमें आप ज़ूम आउट करना चाहते हैं: var zoom = Math.min(height/neededHeight, width/neededWidth);।

जगह में इन मूल्यों के साथ

, आप अपने componentWillMount में ज़ूम के लिए एक Animated मूल्य निर्धारित कर सकते हैं, zoom इस तरह से 1 से शुरू न खत्म होने वाली:

Animated.timing(
    this.state.animatedZoom, 
    {toValue: zoom} 
).start(); 

निर्माता इस प्रकार दिखाई देगा:

constructor(props) { 
    super(props); 
    this.state = { 
    animatedZoom: new Animated.Value(1), 
    }; 
} 

समारोह प्रस्तुत करना इस प्रकार दिखाई देगा (संदर्भ को बदलने के लिए here पाया जा सकता है):

<ScrollView 
    style={{width: 500, height: 1000, transform: [{ scale: this.state.animatedZoom }]}} 
> 
    <View style={{width: 2000, height: 5000}}> 
    <Image style={{width: 2000, height: 2000}} source={.....}/> 
    <Image style={{width: 2000, height: 3000}} source={.....}/> 
    </View> 
</ScrollView>