Блог

Предыстория

Я разрабатываю компонент тепловой карты в React Native, который по сути является, <View> который реагирует на pointerEvents предоставленные пользователем. Они children извлекаются из this.props и передаются в представление.

 <View
    style={s.overlay}
    onLayout={this._onLayout}
    onMagicTap={this._onDoubleTwoFingerTouch}
    onAccessibilityTap={this._onDoubleTouchAccessible}
    onStartShouldSetResponder={this._onTouchStart}
    onResponderMove={this._onTouchMove}
    onResponderReject={this._onTouchCancel}
    onResponderTerminate={this._onTouchCancel}
    onResponderRelease={this._onTouchEnd}
    pointerEvents={'auto'}
>
    {children}
</View>
  

Проблема

Представление получает все события касания до тех пор, пока под ним нет осязаемого компонента (например, <TouchableOpacity> компонента). Очевидно, что тогда дочерний компонент реагирует на pointerEvents .

Я уже знаю, как auto , box-none и т.д. pointerEvents перечисления работают, но я не нашел правильной комбинации или трюка для передачи этих событий от родителей к дочерним элементам.

TL; DR

Как я могу реагировать на pointerEvents в ОБОИХ родительском и дочернем компонентах при нажатии пользователем?