ReactNative onPress 不存在 - Javascript

在ReactNative开发中，我们常常需要为组件添加事件处理函数，其中最常用的就是onPress事件。然而有时我们会发现当我们添加了onPress事件后，却发现它并不存在！当我们点击组件时，也就没有反应了。这是为什么呢？

问题原因

ReactNative组件并不是原生组件，它们是在原生组件的基础上构建的。一些原生组件拥有自己的属性，但在ReactNative中并没有对应的属性，比如TouchableHighlight、TouchableOpacity等组件的onPress属性。原因是因为它们是在原生组件TouchableWithoutFeedback的基础上构建的，并不是原生组件，所以它们没有原生组件的onPress属性。

解决方法

解决方法就是将onPress属性添加到原生组件上，然后在组件的props中添加onPress属性即可。例如：

<TouchableOpacity onPress={() => { console.log('onPress') }}>
  <Text>click me</Text>
</TouchableOpacity>

如果想要在组件内部使用onPress事件，可以使用TouchableWithoutFeedback组件，该组件没有默认的样式，并且支持任意子元素，也可以使用onPress事件。例如：

<TouchableWithoutFeedback onPress={() => { console.log('onPress') }}>
  <View>
    <Text>click me</Text>
  </View>
</TouchableWithoutFeedback>

结论

在ReactNative中，一些组件可能没有onPress属性，这是因为这些组件并非原生组件，而是在原生组件的基础上构建的。如果需要在这些组件上使用onPress事件，可以将onPress事件添加到包含的原生组件中，或者使用TouchableWithoutFeedback组件。