प्रतिक्रिया मूल में एक दृश्य का आकार प्राप्त करें

Question

क्या एक निश्चित दृश्य का आकार (चौड़ाई और ऊंचाई) प्राप्त करना संभव है? उदाहरण के लिए, मेरे पास प्रगति दिखाने वाला एक दृश्य है:

<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} /> 

मुझे अन्य विचारों को ठीक से संरेखित करने के लिए दृश्य की वास्तविक चौड़ाई जानने की आवश्यकता है। क्या यह संभव है?

Answer 1

प्रतिक्रियाशील मूल निवासी 0.4.2 के रूप में, देखें घटकों में एक onLayoutप्रोप है । किसी फ़ंक्शन ऑब्जेक्ट में ले जाने वाले फ़ंक्शन में पास करें। घटना nativeEventमें दृश्य का लेआउट शामिल है।

<View onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout;
}} />

onLayoutहैंडलर भी सक्रिय किया जाएगा जब भी दृश्य आकार दिया जाता है।

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

Comments

इस दृष्टिकोण का मुद्दा यह है कि जब डिवाइस घूमता है / आकार में परिवर्तन होता है, तो मुझे दोबारा कॉल नहीं मिलता है।

— मैथ्यू

दृश्य के फ्रेम में परिवर्तन होने पर ऑन लाइनआउट किया जाता है। शायद आपका दृष्टिकोण रोटेशन पर इसके आकार या स्थिति को नहीं बदलता है। UIExplorer में onLayout उदाहरण देखें, जहाँ onLayout को रोटेशन पर लगाया जाता है।

— आईडीई

मान लीजिए कि मैं Viewआयामों के आधार पर एक अलग प्रदर्शन करना चाहता हूं । मुझे समझ नहीं आ रहा है कि मैं व्यू onLayoutको कैसे प्रदर्शित करूँ, इसे बदलने के लिए मैं व्यू के फंक्शन का उपयोग कैसे कर सकता हूँ। एक अनंत लूप के लिए नेतृत्व नहीं करता है?

— लेन रेटिग 16

@LaneRettig हाँ यह ऐसा करता है यदि यह वास्तव में आप क्या करना चाहते हैं, तो आपको अपना कोड इस तरह से लिखना चाहिए जो स्थिर संतुलन तक पहुँचता है। लेकिन ऐसा लगता है कि आप स्क्रीन के आयामों के आधार पर अपने दृश्य को अनुकूलित करना चाह सकते हैं, जिसमें मामला onLayoutअसंबंधित है।

— आईडीई

@ आप लेआउट की गणना होने तक यूआई को कैसे छिपाएंगे?

— इरफानलोन

Answer 2

यह केवल एक चीज है जो मेरे लिए काम करती है:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class Comp extends Component {

  find_dimesions(layout){
    const {x, y, width, height} = layout;
    console.warn(x);
    console.warn(y);
    console.warn(width);
    console.warn(height);
  }
  render() {
    return (
      <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Comp', () => Comp);

Answer 3

मूल रूप से यदि आप आकार सेट करना चाहते हैं और इसे बदलना चाहते हैं तो इसे इस तरह लेआउट पर स्थिति में सेट करें:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'yellow',
  },
  View1: {
    flex: 2,
    margin: 10,
    backgroundColor: 'red',
    elevation: 1,
  },
  View2: {
    position: 'absolute',
    backgroundColor: 'orange',
    zIndex: 3,
    elevation: 3,
  },
  View3: {
    flex: 3,
    backgroundColor: 'green',
    elevation: 2,
  },
  Text: {
    fontSize: 25,
    margin: 20,
    color: 'white',
  },
});

class Example extends Component {

  constructor(props) {
    super(props);

    this.state = {
      view2LayoutProps: {
        left: 0,
        top: 0,
        width: 50,
        height: 50,
      }
    };
  }

  onLayout(event) {
    const {x, y, height, width} = event.nativeEvent.layout;
    const newHeight = this.state.view2LayoutProps.height + 1;
    const newLayout = {
        height: newHeight ,
        width: width,
        left: x,
        top: y,
      };

    this.setState({ view2LayoutProps: newLayout });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.View1}>
          <Text>{this.state.view2LayoutProps.height}</Text>
        </View>
        <View onLayout={(event) => this.onLayout(event)} 
              style={[styles.View2, this.state.view2LayoutProps]} />
        <View style={styles.View3} />
      </View>
    );
  }

}


AppRegistry.registerComponent(Example);

आप इसे कैसे संशोधित कर सकते हैं इसके कई और बदलाव कर सकते हैं, इसे एक अन्य घटक में उपयोग करके, जिसमें आवरण के रूप में एक और दृश्य है और एक ऑनरप्रोडररेल कॉलबैक बनाएं, जो राज्य में टच इवेंट स्थान को पारित कर सकता है, जिसे तब बाल घटक को पारित किया जा सकता है। संपत्ति के रूप में, जो अद्यतन स्थिति को ओवरलैड कर सकता है, जैसे {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}और रख कर।

Answer 4

आप सीधे Dimensionsमॉड्यूल का उपयोग कर सकते हैं और अपने विचारों के आकार को शांत कर सकते हैं। वास्तव में, Dimensionsआपको मुख्य विंडो आकार देते हैं।

import { Dimensions } from 'Dimensions';

Dimensions.get('window').height;
Dimensions.get('window').width;

आशा है कि आप मदद करने के लिए!

अद्यतन : आज फ्लेक्स केStyleSheet साथ देशी का उपयोग करके अपने विचारों को व्यवस्थित करने से आपके दृश्य आकारों की गणना करने के बजाय व्यापक मामलों में सुरुचिपूर्ण लेआउट समाधान के साथ स्वच्छ कोड लिखने में मदद मिलती है ...

हालांकि एक कस्टम ग्रिड घटकों का निर्माण , जो मुख्य विंडो के आकार की घटनाओं के प्रति प्रतिक्रिया करता है, सरल विजेट घटकों में एक अच्छा समाधान पैदा कर सकता है

Comments

वाह, यह अधिक स्पष्ट रूप से प्रलेखित क्यों नहीं है ?! मैं ('विंडो') के बजाय 'चौड़ाई' और 'ऊँचाई'

आपके द्वारा दिया गया उदाहरण विंडो के आयाम प्रदान करता है , दिए गए दृश्य का नहीं; यह कैसे प्रासंगिक है?

— मार्क अमेरी

@MarkAmery विंडो आयामों के साथ आप योजना बना सकते हैं कि आपके विचार कैसे दिखेंगे

— ब्रूनो गुएरा

@BrunoGuerra आप आयामों द्वारा एक निश्चित दृश्य (विंडो नहीं) आकार प्राप्त करने के लिए कोड दिखा सकते हैं?

— स्पार्क.बाओ

डिवाइस घुमाए जाने पर कई उपकरणों पर आयाम अपडेट नहीं होते हैं। यह एक ज्ञात मुद्दा है और प्रतिक्रिया-देशी 0.32.0-rc.0 के रूप में निश्चित नहीं लगता है

— ग्लेन लॉरेंस

Answer 5

शायद आप उपयोग कर सकते हैं measure:

measureProgressBar() {
    this.refs.welcome.measure(this.logProgressBarLayout);
},

logProgressBarLayout(ox, oy, width, height, px, py) {
  console.log("ox: " + ox);
  console.log("oy: " + oy);
  console.log("width: " + width);
  console.log("height: " + height);
  console.log("px: " + px);
  console.log("py: " + py);
}

Comments

मेरे जीवन के लिए मैं समझ नहीं पा रहा हूं कि कैसे ठीक से उपयोग किया जाए NativeMethodsMixin। कोई फर्क नहीं पड़ता कि मैं क्या करता हूं, measureहमेशा अनिर्धारित रहता है। कोई संकेत?

— chandlervdw

आपको NativeMethodsMixinफ़ंक्शन का उपयोग करने की आवश्यकता नहीं है केवल कुछ तत्वों पर उपलब्ध है। उदाहरण के लिए TouchableWithFeedbackमाप कार्य है, लेकिन एक नियमित Touchableनहीं है। Viewआपके द्वारा उपयोग किए जा रहे प्रकार को बदलने का प्रयास करें , रेफरी प्राप्त करें और जांचें कि क्या माप तत्व उपलब्ध है। मैं इस अस्वस्थ पर ठोकर खाई हूँ।

— n0rm

Answer 6

मेरे लिए% का उपयोग करने के लिए आयाम सेट करना मेरे लिए काम किया है width:'100%'

Answer 7

यहाँ डिवाइस के पूर्ण दृश्य के आयाम प्राप्त करने के लिए कोड है।

var windowSize = Dimensions.get("window");

इसे इस तरह उपयोग करें:

width=windowSize.width,heigth=windowSize.width/0.565

Comments

यह ठीक है, लेकिन यह सवाल का जवाब नहीं देता है।

— मोसो अकिनेमी