javascript - 错误 : Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component stack

Question

我很难处理这个错误。

我不明白为什么？我有一个未使用自定义组件的子组件。我将 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>

Answer 1

按照文档中关于 Composite components and setNativeProps 的说明，我能够修复我的应用程序中的类似错误。将 setNativeProps 转发给 child 。来自文档:

All we need to do is provide a setNativeProps method on our component that calls setNativeProps on the appropriate child with the given arguments.

下面是您的代码，更新了对我有用的相同更改。我也在使用 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>
    );
  }
})