Question

我尝试使用ref来衡量一个视图，但是width返回的是{0}，尽管事实上我看到了屏幕上显示的视图（而且它是＆＃39; s远非等于0）。

我试图遵循这个：https://github.com/facebook/react-native/issues/953但它只是不起作用......我只想获得视图的实际宽度。

这是我的代码：

var Time = React.createClass({
  getInitialState: function() {
    return({ progressMaxSize: 0 }); 
  },
  componentDidMount: function() {
    this.measureProgressBar();
  },
  measureProgressBar: function() {
    this.refs.progressBar.measure(this.setWidthProgressMaxSize);
  },
  setWidthProgressMaxSize: function(ox, oy, width, height, px, py) {
    this.setState({ progressMaxSize: width });
  },
  render: function() {
    return(
      <View style={listViewStyle.time} ref="progressBar">
        <View style={listViewStyle.progressBar} >
          <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/>
        </View>
      </View>
    );
  }
});

相关的样式：

time: {
    position: 'absolute',
    bottom: 5,
    left: 5,
    right: 5,
    backgroundColor: '#325436',
    flexDirection: 'row',
  },
  progressBar: {
    flex: 1,
    backgroundColor: '#0000AA',
  },
  progressMax: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: '#000',
    height: 30, 
  },

Answer 1

您想衡量进度条onLayout。

var Time = React.createClass({
  getInitialState: function() {
    return({ progressMaxSize: 0 }); 
  },
  measureProgressBar: function() {
    this.progressBar.measure(this.setWidthProgressMaxSize);
  },
  setWidthProgressMaxSize: function(ox, oy, width, height, px, py) {
    this.setState({ progressMaxSize: width });
  },
  render: function() {
    return(
      <View style={listViewStyle.time} ref={(c) => { this.progressBar = c; } onLayout={this.measureProgressBar}>
        <View style={listViewStyle.progressBar} >
          <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/>
        </View>
      </View>
    );
  }
});

Answer 2

在夜间，一些人讨论了一个（hacky）解决方案，但它解决了我的问题，在此处找到了它：https://github.com/facebook/react-native/issues/953

基本上，解决方案是使用setTimeout，一切都神奇地起作用：

componentDidMount: function() {
  setTimeout(this.measureProgressBar);
},

measureProgressBar: function() {
  this.refs.progressBar.measure((a, b, width, height, px, py) =>
    this.setState({ progressMaxSize: width })
  );
}

Answer 3

要测量视图大小，根本不需要使用ref。你可以从onLayout传递的nativeEvent中获取它。

Sub InsertPictures(oRange As Range)
   Dim oCell As Range

   For Each oCell In oRange.Cells
      If oCell.Value <> "" Then
         ' See if this contains a picture
         InsertPicture oCell
    End If
   Next
End Sub

Sub InsertPicture(oCell As Range)
   Dim sPicName As String
   Dim oFSO As Object
   Dim ws As Worksheet
   Dim p As Object


sPicName = oCell.Value
   If sPicName = "" Then Exit Sub
   Set oFSO = CreateObject("Scripting.FileSystemObject")
   If Not oFSO.FileExists("Libraries\Pictures\” & sPicName & ".jpg") Then 
Exit Sub ' Pic not found

   ' Insert picture
   Set p = ActiveSheet.Pictures.Insert("Libraries\Pictures\” & sPicName & ".jpg")

   ' Ensure placed in correct location
   With p
   .Top = oCell.Top
   .Left = oCell.Left
   .Height = 275
   .Width = 275
   End With
 End Sub

Sub test()
   Dim oEndCell As Range

   Set oEndCell = Range("A1").SpecialCells(xlCellTypeLastCell)
   InsertPictures ActiveSheet.Range("A1", oEndCell)
End Sub

React-Native：测量视图

3 个答案: