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

How to get size of a component in react-native?

本文关键字：组件 获取 react native      更新时间：2023-09-26

我知道有

Dimensions.get('window');

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

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

我在这里设置了一个实现代码的示例项目：

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);
相关文章：