Элемент, который прослушивает событие нажатия внутри сенсорного элемента

Question

У меня есть элемент, который слушает события прессы. Как мне обернуть это в осязаемый элемент, и чтобы мой пользовательский элемент продолжал слушать события?

У меня такая структура

<TouchableOpacity
    onPress={(e) => { console.log(e.nativeEvent); }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => { console.log(cfi); }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

Сейчас TouchableOpacity ловит события нажатия, но не вызывает событие для дочерних элементов.

Answer 1

Чего вы хотите достичь?

OnPress вашего пользовательского компонента никогда не будет вызываться. Только onPress TouchableOpacity будет вызван.

Что вы можете сделать, так это то, что вы можете установить setState для компонента, а в следующем цикле рендеринга вы можете передать событие вашему EpubDocumentReader,

<TouchableOpacity
    onPress={(e) => {
        console.log(e.nativeEvent);
        this.setState({
            event: e
        })
    }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        event={this.state.event}
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => {
            console.log(cfi);
        }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

Конечно, вы в своем конструкторе, вам нужно настроить initialState.

constructor(props){
  super(props)
  this.state = {
    event: null
  }
}