在可触摸元素内侦听新闻事件的元素

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。

您可以做的是可以在组件上设置状态，在下一个渲染周期中，您可以将事件传递给您的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>

当然，在构造函数中，您需要设置初始状态。

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