Wie bekomme ich die Größe einer Komponente in react-native?

Question

Ich weiß, es

Dimensions.get('window'); 

Aber was ist mit einer beliebigen Ansicht ist, die keine dim Saite hat? Die willkürliche Ansicht könnte viele Unteransichten haben. Die Größe der Ansicht hängt vom Stil und Layout der Unteransichten ab, und es ist schwierig, die Größe aus Unteransichten zu berechnen.

Answer 1

Sie können eine Ansicht mit der onLayout-Funktion here und here messen. Um es einzurichten, müssen Sie eine onLayout-Funktion aufrufen, die ein Ereignis übernimmt und ein Objekt zurückgibt, das das nativeEvent-Objekt enthält. Dieses Objekt enthält die Koordinaten x & y sowie die Breite und Höhe der Ansicht.

https://rnplay.org/apps/mbPdZw

Unten ist eine einfache Einrichtung, die eine Ansicht misst:

Ich habe ein Beispielprojekt der Umsetzung des Code here einrichten

~

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} = React; 

var SampleApp = React.createClass({ 

    getInitialState() { 
     return { 
      x: '', 
      y: '', 
      width: '', 
      height: '', 
      viewHeight: 100 
     } 
    }, 

    measureView(event) { 
    console.log('event peroperties: ', event); 
    this.setState({ 
      x: event.nativeEvent.layout.x, 
      y: event.nativeEvent.layout.y, 
      width: event.nativeEvent.layout.width, 
      height: event.nativeEvent.layout.height 
     }) 
    }, 

    changeHeight() { 
     this.setState({ 
     viewHeight: 200 
     }) 
    }, 

    render: function() { 
    return (
     <View > 
     <View onLayout={(event) => this.measureView(event)} style={{height:this.state.viewHeight, marginTop:120, backgroundColor: 'orange'}}> 
       <Text >The outer view of this text is being measured!</Text> 
      <Text>x: {this.state.x}</Text> 
      <Text>y: {this.state.y}</Text> 
      <Text>width: {this.state.width}</Text> 
      <Text>height: {this.state.height}</Text> 
     </View> 

     <TouchableHighlight style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center', padding:15, backgroundColor: '#ddd', marginTop:10}} onPress={() => this.changeHeight() }> 
       <Text style={{fontSize:18}}>Change height of container</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 28, 
    textAlign: 'center', 
    margin: 10, 
    } 
}); 

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