Подтвердить что ты не робот

Ошибка: Invariant Violation: Touchable child должен быть либо native, либо forward setNativeProps в собственный стек компонентов

Мне нелегко справиться с этой ошибкой.

Я не понимаю, почему? У меня есть дочерний компонент, который не использует пользовательский компонент. Я завернул 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>

Ответ 1

Мне удалось исправить аналогичную ошибку в моем приложении, выполнив инструкции в документах Компонента и setNativeProps, чтобы отправить setNativeProps ребенку. Из документов:

Все, что нам нужно сделать, это предоставить метод setNativeProps для нашего компонента, который вызывает setNativeProps для соответствующего дочернего элемента с указанными аргументами.

Ниже приведен код, обновленный с теми же изменениями, которые сработали для меня. Я также использовал react-native-icons, поскольку, похоже, вы тоже.

Единственными изменениями являются метод setNativeProps и создание ref в 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>
    );
  }
})