react-native - React Native onLayout 与 React Hooks

Question

我想测量 的大小React Native View 每次渲染，并将其保存到状态。如果元素布局没有改变效果不应该运行。

使用基于类的组件很容易，其中 onLayout可以使用。但是我在使用 React Hooks 的功能组件中该怎么做？

我读过 useLayoutEffect .如果这是要走的路，你有一个如何使用它的例子吗？

我制作了这个名为 useDimensions 的自定义钩子(Hook)。这是我已经走了多远:

const useDimensions = () => {
  const ref = useRef(null);
  const [dimensions, setDimensions] = useState({});
  useLayoutEffect(
    () => {
      setDimensions(/* Get size of element here? How? */);
    },
    [ref.current],
  );
  return [ref, dimensions];
};

我使用钩子(Hook)并将 ref 添加到我想要测量其尺寸的 View 中。

const [ref, dimensions] = useDimensions();

return (
  <View ref={ref}>
    ...
  </View>
);

我试过调试 ref.current但在那里没有发现任何有用的东西。我也试过 measure()在效果 Hook 内:

ref.current.measure((size) => {
  setDimensions(size); // size is always 0
});

Answer 1

如果你想要一个更独立的版本，这里是 React Native 的自定义钩子(Hook)版本:

const useComponentSize = () => {
  const [size, setSize] = useState(null);

  const onLayout = useCallback(event => {
    const { width, height } = event.nativeEvent.layout;
    setSize({ width, height });
  }, []);

  return [size, onLayout];
};

const Component = () => {
  const [size, onLayout] = useComponentSize();
  return <View onLayout={onLayout} />;
};