TouchableOpacity 与 onPress 的多个子项

Question

我有 FlatList，其中自定义行项目包裹在 TouchableOpacity 内。我希望在 TouchableOpacity 内有多个 onPress ，以便每个子视图都可以处理其受尊重的工作。问题是，当按下子视图时，它会完成它的工作，但父视图onPress也会被执行。如何阻止呢？

<TouchableOpacity onPress={ () => this.doSomething()}>
  <Text>Some content</Text>
  <Icon name="trash" size={20} onPress={this.onDeleteItem(item)}/>
<TouchableOpacity>

换句话说，如何仅onDeleteItem当用户按下垃圾桶图标时才执行？

任何建议表示赞赏，谢谢。

Answer 1

将第一个 onPress 移至文本，或比最外层容器更合适的位置。

<TouchableOpacity>
  <Text onPress={ () => this.doSomething()} >Some content</Text>
  <Icon name="trash" size={20} onPress={this.onDeleteItem(item)}/>
<TouchableOpacity>

无法避免父 TouchableOpacity 上的事件侦听器，因为它包装了所有内容。您需要添加一些容器/内容（NativeBase）以使其更加模块化。