时间戳

首页 > 解决方案 > React Native onLayout 与 React Hooks

react-native - React Native onLayout 与 React Hooks

问题描述

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

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

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

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

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

我使用钩子并将 ref 添加到我想要测量其尺寸的视图中。

const [ref, dimensions] = useDimensions();

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

我试过调试ref.current，但没有发现任何有用的东西。我还在效果挂钩中尝试了measure() ：

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

标签： react-nativereact-hooks

解决方案

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

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} />;
};

推荐阅读