ios - 在 React Native 中获取 View 的大小

Question

是否可以获取某个 View 的大小(宽度和高度)？例如，我有一个显示进度的 View :

<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} /> 

我需要知道 View 的实际宽度才能正确对齐其他 View 。这可能吗？

Answer 1

从 React Native 0.4.2 开始，View 组件有一个 onLayout prop .传入一个接受事件对象的函数。事件的 nativeEvent 包含 View 的布局。

<View onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout;
}} />

每当调整 View 大小时，onLayout 处理程序也会被调用。

主要注意事项是 onLayout 处理程序在您的组件安装后的一帧首先被调用，因此您可能希望隐藏您的 UI，直到您计算出您的布局。