如何獲取反應本地組件的大小？

Question

我知道有

Dimensions.get('window'); 

但對於一個沒有昏暗的字符串任意看法？任意的觀點可能有許多子視圖。視圖的大小由子視圖的樣式和佈局決定，並且很難從子視圖計算大小。

Answer 1

您可以使用提到的onLayout函數here和here來測量視圖。要設置它，您需要調用一個onLayout函數，該函數接受一個事件並返回一個包含nativeEvent對象的對象。該對象包含y座標，以及視圖的寬度和高度。

我已經成立了一個例子項目實施代碼here：

https://rnplay.org/apps/mbPdZw

下面是一個簡單的設置測量一個觀點：

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