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

Question

我有一个 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 是唯一的方法，请告诉我。

Answer 1

尝试改变这个

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

到:

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

让我知道它是否有效!