React native 使用React钩子进行React纯本地布局

我想在每次渲染时测量的大小，并将其保存到状态。如果元素布局未更改，则不应运行效果

使用基于类的组件很容易，可以在其中使用。但是我在使用React钩子的功能组件中应该做什么呢

我已经读到了。如果是这样的话，你有一个如何使用它的例子吗

我做了一个叫做useDimensions的定制钩子。这就是我所取得的成绩：

const useDimensions=（）=>{
const ref=useRef（null）；
const[dimensions，setDimensions]=useState（{}）；
使用布局效果(
() => {
setDimensions（/*在这里获取元素的大小？如何？*/）；
},
[参考电流]，
);
返回[参考，尺寸]；
};

我使用钩子，将ref添加到我想要测量的视图中

const[ref，dimensions]=useDimensions（）；
返回(
...
);

我试着调试

ref.current

，但没有发现任何有用的东西。我还尝试了在效果挂钩内：

ref.current.measure（（大小）=>{
setDimensions（大小）；//大小始终为0
});

你的想法是对的，只是需要一些调整。。。主要是，在

useffect

依赖项数组中提交元素ref并使用elementRef（而不是

elementRef.current

）

（关于

useffect

与

useLayoutEffect

，由于您只是在测量而不是改变DOM，因此我相信

useffect

，但如果需要，您可以将其互换）

像这样使用它：

function App() {
  const divRef = useRef(null);
  const [dimensions] = useDimensions(divRef);
  return (
    <div ref={divRef} className="App">
      <div>
        width: {dimensions.width}, height: {dimensions.height}
      </div>
    </div>
  );
}

const App=()=>{
  const [dimensions, setDimensions] = useState({width:0, height:0})
    return (
      <View onLayout={(event) => {
                const {x, y, width, height} = event.nativeEvent.layout;
                setDimensions({width:width, height:height});
        }}>
        <Text}>
          height: {dimensions.height} width: {dimensions.width}
        </Text>
      </View>
    );

}

---

如果您想要更独立的版本，这里是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} />;
};

const useComponentSize=（）=>{
const[size，setSize]=useState（null）；
const onLayout=useCallback（事件=>{
const{width，height}=event.nativeEvent.layout；
设置大小（{宽度，高度}）；
}, []);
返回[size，onLayout]；
};
常量组件=（）=>{
const[size，onLayout]=useComponentSize（）；
返回；
};

作为对 ，并回答Kerkness的问题-下面是一个提供x、y位置和布局大小的自定义挂钩示例：

const useComponentLayout = () => {
  const [layout, setLayout] = React.useState(null);

  const onLayout = React.useCallback(event => {
    const layout = event.nativeEvent.layout;
    setLayout(layout);
  }, [])

  return [layout, onLayout]
}

const Component = () => {
  const [{ height, width, x, y }, onLayout] = useComponentSize();
  return <View onLayout={onLayout} />;
};

const useComponentLayout=（）=>{
const[layout，setLayout]=React.useState（null）；
const onLayout=React.useCallback（事件=>{
const layout=event.nativeEvent.layout；
设置布局（布局）；
}, [])
返回[布局，仅布局]
}
常量组件=（）=>{
const[{height，width，x，y}，onLayout]=useComponentSize（）；
返回；
};

谢谢，但是我该如何在react native中完成呢？很好，谢谢！我喜欢自给自足的定制钩子，它允许我在使用它们的组件中尽可能少地使用它们。这是一个很棒的钩子。是否也要获得x和y位置？我下面的回答中有一个获得位置的示例：

const useComponentLayout = () => {
  const [layout, setLayout] = React.useState(null);

  const onLayout = React.useCallback(event => {
    const layout = event.nativeEvent.layout;
    setLayout(layout);
  }, [])

  return [layout, onLayout]
}

const Component = () => {
  const [{ height, width, x, y }, onLayout] = useComponentSize();
  return <View onLayout={onLayout} />;
};