Abrufen der Größe einer Ansicht in React Native

Ist es möglich, die Größe (Breite und Höhe) einer bestimmten Ansicht zu ermitteln? Zum Beispiel habe ich eine Ansicht, die den Fortschritt zeigt:

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

Ich muss die tatsächliche Breite der Ansicht kennen, um andere Ansichten richtig ausrichten zu können. Ist das möglich?

Ab React Native 0.4.2 verfügen View-Komponenten über eine onLayoutRequisite . Übergeben Sie eine Funktion, die ein Ereignisobjekt übernimmt. Das Ereignis nativeEvententhält das Layout der Ansicht.

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

Der onLayoutHandler wird auch aufgerufen, wenn die Größe der Ansicht geändert wird.

Die wichtigste Einschränkung besteht darin, dass der onLayoutHandler erst einen Frame nach dem Mounten Ihrer Komponente aufgerufen wird. Daher möchten Sie möglicherweise Ihre Benutzeroberfläche ausblenden, bis Sie Ihr Layout berechnet haben.

Dies ist das einzige, was für mich funktioniert hat:

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

Wenn Sie die Größe festlegen und ändern möchten, stellen Sie sie im Layout wie folgt ein:

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

Sie können viel mehr Variationen davon erstellen, wie es geändert werden soll, indem Sie dies in einer anderen Komponente verwenden, die eine andere Ansicht als Wrapper hat, und einen onResponderRelease-Rückruf erstellen, der den Ort des Berührungsereignisses in den Status übergibt, der dann an die untergeordnete Komponente übergeben werden kann als Eigenschaft, die den aktualisierten Status von onLayout durch Platzieren {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]}usw. überschreiben könnte .

Sie können das DimensionsModul direkt verwenden und Ihre Ansichtsgrößen berechnen. DimensionsGeben Sie Ihnen tatsächlich die Hauptfenstergrößen an.

import { Dimensions } from 'Dimensions';

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

Ich hoffe, Ihnen zu helfen!

Update : Wenn Sie heute native StyleSheetmit Flex- Arrangements für Ihre Ansichten verwenden, können Sie in weiten Fällen sauberen Code mit eleganten Layoutlösungen schreiben, anstatt Ihre Ansichtsgrößen zu berechnen ...

Obwohl das Erstellen von benutzerdefinierten Rasterkomponenten , die auf Ereignisse zur Größenänderung des Hauptfensters reagieren, eine gute Lösung für einfache Widget-Komponenten darstellen könnte

Vielleicht können Sie verwenden 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);
}

Für mich hat es funktioniert, die Dimensionen auf% zu setzen width:'100%'

Hier ist der Code, um die Abmessungen der vollständigen Ansicht des Geräts abzurufen.

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

Verwenden Sie es so:

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