React native 如何通过 ref 获取元素的高度？

在React Native中，通过使用ref（引用）可以获取组件或元素的实例，并进一步获取其属性，包括尺寸信息如高度。下面是一个具体的步骤和示例，说明如何获取一个元素的高度：

步骤：

1. 创建Ref: 使用React.createRef()来创建一个ref。
2. 关联Ref和元素: 将创建的ref作为某个组件的ref属性值。
3. 测量元素: 使用onLayout事件或者measure方法来获取元素的高度。

示例代码：

使用onLayout事件：

jsx
import React, { Component } from 'react';
import { View, Text } from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      height: 0
    };
  }

  render() {
    return (
      <View 
        onLayout={(event) => {
          const { height } = event.nativeEvent.layout;
          this.setState({ height });
        }}
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text>元素的高度是：{this.state.height} px</Text>
      </View>
    );
  }
}

export default App;

使用measure方法：

jsx
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  measureHeight = () => {
    this.myRef.current.measure((x, y, width, height) => {
      console.log(height);
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <View ref={this.myRef} style={{ backgroundColor: 'red', width: 100, height: 100 }}>
          <Text>测试元素</Text>
        </View>
        <TouchableOpacity onPress={this.measureHeight}>
          <Text>测量高度</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default App;

解释：

在第一个示例中，我们通过onLayout事件直接从布局事件的回调中获取高度。该事件在布局发生变化时触发，这对于响应式设计非常有用。

在第二个示例中，我们使用ref和measure方法。这种方法可以在任意时间点调用，来获取元素的尺寸和位置。此方法更为灵活，适用于需要在特定操作（如用户交互）后获取尺寸的场景。

注意：

• 使用measure方法时，请确保元素已经被渲染在屏幕上，否则无法准确测量。
• onLayout提供的尺寸信息是在布局发生改变时自动更新的，而measure方法可以在任何时间点手动调用获取最新的尺寸信息。