如何让触摸事件传播到TouchableOpacity包装的文本链接？

Question

我有一些onPress包裹在TouchableOpacity中的文本。

<TouchableOpacity onPress={doNavigateToComment}>
  <View>
    <Text>
      <Text onPress={doNavigateToUser}>
        @{user.username}
      </Text>{" "}
      liked your comment.
    </Text>
  </View>
   ... more stuff ...
</TouchableOpacity>

在该文本上的任意位置点击都会触发doNavigateToComment。当用户点击用户名时，它应该调用doNavigateToUser是否可以赋予基础Text onPress优先级？似乎只能识别外部可触摸包装。

Answer 1

我对您的代码进行了一些修改，但是我得到的正是您想要的行为。

doNavigateToComment() {
    console.log('doNavigateComment');
  }
  doNavigateToUser() {
    console.log('doNavigateToUser');
  }
   <View style={styles.container}>
    <TouchableOpacity
      onPress={() => this.doNavigateToComment()}>
      <View style={{ backgroundColor: 'red', height: 40, justifyContent: 'center', alignItems: 'center' }} >
        <Text>
          <Text
            style={{ backgroundColor: 'blue' }}
            onPress={() => this.doNavigateToUser()}>
            Username
          </Text>{' '}
          liked your comment.
        </Text>
      </View>
    </TouchableOpacity>
  </View>

按用户名（蓝色区域）将打印doNavigateToUser，按红色区域将打印doNavigateComment。 您可能只需要调整样式即可。

屏幕截图：

工作博览会：

https://snack.expo.io/SkOzaxdiV

Answer 2

我知道了。我是从TouchableOpacity而不是react-native-gesture-handler导入react-native的。修复导入后，水龙头便开始正常工作。