从 Ref 获取 React-Native 元素的高度答案

【问题标题】：Get React-Native Element's Height From Ref从 Ref 获取 React-Native 元素的高度
【发布时间】：2020-06-30 17:14:36
【问题描述】：

我有一个ScrollView 的引用，需要得到它的高度。它似乎没有高度属性：

import React, { useRef, useEffect } from "react";
import { View, ScrollView } from "react-native";
function Component() {
  const scrollView = useRef(null);
  useEffect(
    function() {
      // All of these print undefined
      console.log(scrollView.height);
      console.log(scrollView.current.height);
      console.log(scrollView.current.clientHeight);
    },
    [scrollView]
  );

  return (
    <ScrollView ref={scrollView}>
      <View style={{ height: 800, width: 100 }} />
    </ScrollView>
  );
}

我如何简单地从 ref 中获取 scrollView 的高度？在 ReactJS 中是可能的，但我不确定 react-native。

如果可能的话，我想在不使用 onLayout 的情况下执行此操作。如果 onLayout 是唯一的方法，请告诉我。

【问题讨论】：

这能回答你的问题吗？ Get size of a View in React Native
@Qiarash 不完全是。我知道 onLayout 可用于在布局视图后获取元素的高度，但我希望能够在不使用 onLayout 回调的情况下从 ref 本身获取高度。不过，获得高度的唯一方法可能是 onLayout 回调。我只是觉得裁判也应该有这些信息。
我相当有信心onLayout 是做到这一点的唯一方法。但是，如果您想将其从业务逻辑中抽象出来，那么您可以围绕 ScrollView 构建一个包装器，将布局高度和宽度保存到状态。然后你可以从 ref 访问它。

标签： reactjs react-native react-hooks

【解决方案1】：

尝试更改此设置

useEffect(
function() {
  ...
},
[scrollView]
);

到：

useEffect(
function() {
  if (!scrollView.current) {
        console.log("scrollView not mounted to DOM yet");
  } else {
          // Get scrollViewHeight here
         }
},[scrollView.current]
);

让我知道它是否有效！

【讨论】：

问题不在于useEffect函数运行，只要设置了scrollView ref，它就会正常运行。问题是我在scrollView.current 中找不到一个属性，它给了我元素的高度。我可以很好地访问滚动视图，只是无法从参考中获取高度。
请注意，为了让 scrollView 元素有一个“高度”，它的 CSS 样式需要完全加载。 scrollView.current 指向安装在屏幕上的 scrollView 元素，并且在所有 CSS 样式已经应用（如果有的话）之后。因此，您需要在 useEffect() 中做的是检查 scrollView.current（不是 scrollView）是否存在，如果是，则打印出 scrollView.current.scrollHeight。