参照は未定義です反応ネイティブ

Question

新しい反応ネイティブに。私の親の中のビューのx、y座標を読み込もうとしています。 measureView内のコード

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> 
); 
}, 

の下に使用して、this.refsは常にundefinedです。どうして？

何らかの理由で最後の行を表示したいので、私は最後のビューの座標をListViewに読み込もうとしています。これには他の解決策がありますか？

このクラスが親クラスにエクスポートされていることにも注意してください。

Answer 1

ES2015ラムダを使用して、メソッド内で正しい語彙値を取得してみてください。

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> 
); 
},