在 React Native 中获取视图的大小

Question

是否可以获得某个视图的大小（宽度和高度）？例如，我有一个显示进度的视图：

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

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

原文由 Matthew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

主要的警告是 onLayout 处理程序在组件安装后的一帧中首先被调用，因此您可能想要隐藏您的 UI，直到您计算出您的布局。

原文由 ide 发布，翻译遵循 CC BY-SA 4.0 许可协议