React本机错误：undefined不是一个对象（评估'_this._root.setNativeProps'）

Question

我想创建自定义按钮。对于这一点，我包裹着我的存在的观点为TouchableHighlight（写信给我请的另一种方式，如果它不适合在这里）

<TouchableHighlight onPress={this.freeTimeTapped} underlayColor="white"> 
    <LabelsView data={this.freeTimeData} 
       containerStyle={{ backgroundColor: '#3A65FF' }} /> 
</TouchableHighlight> 

此代码抛出错误可触摸的孩子必须是本地，描述here，为例。所以，我说

setNativeProps = (nativeProps) => { 
    this._root.setNativeProps(nativeProps); 
} 

错误消失了，但现在我收到一个错误

React Native Error: undefined is not an object (evaluating '_this._root.setNativeProps')

触摸后。我究竟做错了什么？

约LabelsView更多代码：

export default class LabelsView extends Component { 
    // Make TouchableHighlight wrapper work 
    setNativeProps = (nativeProps) => { 
     this._root.setNativeProps(nativeProps); 
    } 

    render() { 
     return (
      <View style={[styles.container, this.props.containerStyle]}> 
       <View style={styles.leftContainer}> 
        <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text> 
       </View> 
       <View style={styles.rightContainer}> 
        <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text> 
        <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text> 
       </View> 
      </View> 
     ); 
    } 
} 

Answer 1

我创建的相同sitaution如你发现你正在做错误的事情就是你包裹TouchableHighlight内的一类。如果你想将其包装在任何可触摸组件随即反应过来本地需求的本地孩子，所以要解决这个改变你的代码如下： -

<LabelsView freeTimeTapped={this.freeTimeTapped} data={this.freeTimeData} 
      containerStyle={{ backgroundColor: '#3A65FF' }} /> 

和你LabelsView类，如下所示： -

render() { 
    return (
     <TouchableHighlight onPress={this.props.freeTimeTapped} underlayColor="white"> 
     <View style={[styles.container, this.props.containerStyle]}> 
      <View style={styles.leftContainer}> 
       <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text> 
      </View> 
      <View style={styles.rightContainer}> 
       <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text> 
       <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text> 
      </View> 
     </View> 
     </TouchableHighlight> 
    ); 
} 

如果仍然哈瓦任何问题，然后让我知道:)

如果你想拥有它的父，刚修好你的代码是：

export default class LabelsView extends Component { 
    // Make TouchableHighlight wrapper work 
    setNativeProps = (nativeProps) => { 
     this._root.setNativeProps(nativeProps); 
    } 

    render() { 
     return (
      <View ref={component => this._root = component} style={[styles.container, this.props.containerStyle]}> 
       <View style={styles.leftContainer}> 
        <Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text> 
       </View> 
       <View style={styles.rightContainer}> 
        <Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text> 
        <Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text> 
       </View> 
      </View> 
     ); 
    } 
} 

您错过了ref = {component => this._root = component}