reactjs - Pressable 和 TouchableWithoutFeedback 的区别

Question

Pressable 和 TouchableWithoutFeedback 是更高阶的组件，用于为其子组件添加触摸功能。它们有非常相似的用例。我想我可以在任何地方使用 Pressable 代替 TouchableWithoutFeedback（由于官方文档推荐）。

但问题是，有时他们的行为不同。例如，当我用 Pressable 替换 TouchableWithoutFeedback 时，布局会发生变化。我不知道是什么原因造成的，但我认为 Pressable 就像一个单独的视图，而 touchablewithoutfeedback 则不是。

除了它们不同的道具之外，你能清楚地说明这两者之间的区别吗？

这是他们行为不同的地方：

使用 TouchableWithoutFeedback：

export default function App() {
  return (
    <TouchableWithoutFeedback onPress={() => alert("outer pressed")}>
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'blue',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  }
});

可压：

export default function App() {
  return (
    <Pressable onPress={() => alert("outer pressed")}>
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'blue',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  }
});

Answer 1

我想你可以在 SO中找到这个问题的答案。有关更多信息，您可以在Medium上查看这篇文章。