Javascript 如何在react native中获取组件的大小？

我知道有

Dimensions.get('window');

---

但是对于没有模糊字符串的任意视图呢？任意视图可以有多个子视图。视图的大小由子视图的样式和布局决定，很难根据子视图计算大小。

您可以使用前面提到的和中提到的onLayout功能测量视图。要设置它，您需要调用onLayout函数，该函数接受一个事件并返回一个包含nativeEvent对象的对象。此对象包含x&y坐标以及视图的宽度和高度

我已经建立了一个示例项目来实现代码：

以下是测量视图的简单设置：

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

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
可触摸高光
}=反应；
var SampleApp=React.createClass({
getInitialState（）{
返回{
x:“”，
y:“”，
宽度：“”，
高度：''，
视高：100
}
},
measureView（事件）{
日志（'event peroperties:'，event）；
这是我的国家({
x:event.nativeEvent.layout.x，
y:event.nativeEvent.layout.y，
宽度：event.nativeEvent.layout.width，
高度：event.nativeEvent.layout.height
})
},
更改高度（）{
这是我的国家({
视高：200
})
},
render:function（）{
返回(
this.measureView（event）}style={{height:this.state.viewHeight，marginTop:120，backgroundColor:'orange'}>
正在测量此文本的外部视图！
x:{this.state.x}
y:{this.state.y}
宽度：{this.state.width}
高度：{this.state.height}
this.changeHeight（）}>
改变容器的高度
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：28，
textAlign:'中心'，
差额：10，
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

答案很好，但我有点担心性能。你知道这会如何影响应用程序的平滑度吗？调用setState（通过measureView）将触发另一个渲染，并可能创建一个无限循环。在React Native中不建议这样做。似乎是一个复制品