Reactnative Error： Invariant Violation： Touchable child must either be native or forward setNativeProps to a native component stack

发布于08月01日

我很难处理这个错误.

我不明白为什么？我有一个子组件没有使用自定义组件.我将Text或Image或Icon包装在View组件中，然后将它们包装在TouchableHighlight中，在特定页面上仍然得到错误，但在其他做相同事情的页面上没有.

    <TouchableHighlight
      onPress={this.changeTo} style={PictureStyles.btnClickContain}
      underlayColor='#042417'>
      <View
        style={PictureStyles.btnContainer}>
        <Icon
          name='fontawesome|calendar'
          size={25}
          color='#042'
          style={PictureStyles.btnIcon}/>
        <Text style={PictureStyles.btnText}>Book</Text>
      </View>
    </TouchableHighlight>

推荐答案

我按照文档中的说明，将setNativeProps转发给一个子元素，从而修复了我应用程序中的类似错误.从文件中:

我们需要做的就是在我们的组件上提供一个setNativeProps方法，用给定的参数在适当的子级上调用setNativeProps.

下面是你的代码更新与我的工作相同的变化.我也用了react-native-icons，因为看起来你也是.

唯一的变化是setNativeProps方法和使用ref callback syntax在View上创建ref

var MyComponent = React.createClass({
  setNativeProps (nativeProps) {
    this._root.setNativeProps(nativeProps);
  }

  render () {
    return (
      <TouchableHighlight
        onPress={this.changeTo} style={PictureStyles.btnClickContain}
        underlayColor='#042417'>
        <View
          ref={component => this._root = component}
          style={PictureStyles.btnContainer}>
          <Icon
            name='fontawesome|calendar'
            size={25}
            color='#042'
            style={PictureStyles.btnIcon}/>
          <Text style={PictureStyles.btnText}>Book</Text>
        </View>
      </TouchableHighlight>
    );
  }
})