如何获得反应原生组件的高度？答案

【问题标题】：how to get height of react-native component?如何获得反应原生组件的高度？
【发布时间】：2021-05-29 14:31:30
【问题描述】：

如何获取react组件的高度？我想使用一个组件的高度值作为其他组件的填充值，如何在本机反应中做到这一点？例如，我从

制作了一个选择器组件

import { Picker } from '@react-native-picker/picker';

我想做一个<view>组件，填充值为padding:{Picker}.height，怎么做？

更新

感谢@Aseem Gautam 和@Aniket Kolekar，我已经尝试了 Picker 组件的解决方案，但它不起作用，当我尝试使用 View 组件时它运行良好。为什么会发生这种情况？这是否意味着 Picker 组件不继承 View 道具？这是我尝试过的代码

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 {
  find_dimension(layout){
    const {x, y, width, height} = layout;
    console.warn(x);
    console.warn(y);
    console.warn(width);
    console.warn(height);
  }

  render(){
    return(
      <View>
        <Picker onLayout={(event) => {this.find_dimension(event.nativeEvent.layout)}}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
        </Picker>
      </View>
    )
  }
}

【问题讨论】：

这能回答你的问题吗？ Get size of a View in React Native

标签： javascript reactjs react-native

【解决方案1】：

Picker 继承 View 属性。可以使用onLayout事件获取picker的height、width、x&y。

<Picker
  onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout;
}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

【讨论】：

【解决方案2】：

以下是在React-Native 中获取View 的高度的方法：

<View onLayout={(event) => {
  let {height} = event.nativeEvent.layout;
}} />

这也适用于Picker（如果支持的话）。

【讨论】：