Question

我很反应原生。我试图读取其父级内部视图的x，y坐标。使用以下代码

componentDidMount: function() {
  setTimeout(this.measureView);
},
measureView: function() {
  this.refs.completeView.measure((ox, oy, width, height) => {
    this.setState({headerHeight: height});
  });
},
render : function(){
return (
  <TouchableHighlight onPress={() => this.props._pressRow(this.props.currentRowID)}>
    <View style={styles.container}
          ref="completeView">
      <View style={styles.colorView}>
      </View>
      <View style={styles.textWrapper}>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    </View>
  </TouchableHighlight>
);
},

在measureView内，this.refs始终为undefined。为什么呢？

我正在尝试将最后一个视图的坐标读入ListView，因为出于某种原因我想渲染最后一行。那么还有其他解决方案吗？

请注意，此类正在导出到其父类中。

Answer 1

尝试使用ES2015 lambda在方法中获取正确的词汇值。

measureView = () => {
  this.refs.completeView.measure((ox, oy, width, height) => {
    this.setState({headerHeight: height});
  });
},

Answer 2

使用函数而不是字符串设置ref：

var myComponent = null;

...

componentDidMount: function() {
  setTimeout(this.measureView);
},
measureView: function() {
  this.myComponent.completeView.measure((ox, oy, width, height) => {
    this.setState({headerHeight: height});
  });
},
render : function(){
return (
  <TouchableHighlight onPress={() => this.props._pressRow(this.props.currentRowID)}>
    <View style={styles.container}
          ref={((component)=>this.myComponent = component)}>
      <View style={styles.colorView}>
      </View>
      <View style={styles.textWrapper}>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    </View>
  </TouchableHighlight>
);
},

refs在本地反应中是未定义的

2 个答案: