react-nativeでコンポーネントのサイズを取得する方法は？

Question

私は薄暗い文字列を持っていない任意のビューについて

Dimensions.get('window'); 

しかし、何があるか知っていますか？任意のビューは多くのサブビューを持つことができます。ビューのサイズは、サブビューのスタイルとレイアウトによって決まります。サブビューからサイズを計算するのは難しいです。

Answer 1

hereとhereというonLayout関数を使用してビューを測定できます。これを設定するには、イベントを受け取り、nativeEventオブジェクトを含むオブジェクトを返すonLayout関数を呼び出す必要があります。このオブジェクトには、x座標と、ビューの幅と高さが含まれます。

https://rnplay.org/apps/mbPdZw

は、以下のビューを測定し、簡単な設定である：

私はコードhereを実装するサンプルプロジェクトを設定している

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