如何获取React Native组件高度并将其用作其他组件的padding值？

通用实现逻辑 #

React Native中动态获取组件高度并复用为其他组件样式值的标准实现步骤如下：

• 在state中声明高度存储变量，初始值设为0
• 给待测量的组件绑定onLayout回调，从回调参数中拿到event.nativeEvent.layout.height后更新到state
• 需要设置padding的组件，在style属性中直接引用该state变量即可

Picker组件onLayout不生效的原因 #

@react-native-picker/picker封装的是各端原生选择器组件，没有继承View的全量属性，官方暴露的事件回调中本身不支持onLayout，所以直接给Picker组件绑定该回调不会触发，这就是你在View上测试有效、Picker上无效的核心原因。 #

适配Picker的解决代码 #

给Picker外层包裹一层View，测量外层View的高度即可间接拿到Picker的实际高度，修改后的示例代码如下：

import React, { Component } from "react";
import { View, Text, SectionList } from "react-native";
import { Picker } from "@react-native-picker/picker";

export default class App extends Component {
  state = {
    pickerHeight: 0
  }

  find_dimension(layout){
    const {x, y, width, height} = layout;
    // 把高度存到state
    this.setState({
      pickerHeight: height
    })
    console.warn(x);
    console.warn(y);
    console.warn(width);
    console.warn(height);
  }

  render(){
    return(
      <View>
        {/* 给外层View绑定onLayout */}
        <View onLayout={(event) => {this.find_dimension(event.nativeEvent.layout)}}>
          <Picker>
            <Picker.Item label="Java" value="java" />
            <Picker.Item label="JavaScript" value="js" />
          </Picker>
        </View>
        {/* 其他组件使用pickerHeight作为padding */}
        <View style={{padding: this.state.pickerHeight}}>
          <Text>测试padding的组件</Text>
        </View>
      </View>
    )
  }
}

内容的提问来源于stack exchange，提问作者marahman