为什么ReactNative Expo Snack中TouchableOpacity会自动触发onPress事件

问题成因 #

你代码中onPress={clicked()}的写法会在组件渲染阶段立即执行clicked函数，而非将函数作为回调传给TouchableOpacity等待点击触发。
在JavaScript语法规则里，函数名后紧跟()会直接调用该函数并返回执行结果，因此组件首次渲染加载时clicked就会运行，弹出alert，这不是TouchableOpacity自动触发了事件，是错误地直接执行了回调函数导致的。

规避方法 #

• 直接传入函数引用，不需要加调用括号：

<TouchableOpacity onPress={clicked}>

这种方式适合不需要给回调函数传递自定义参数的场景。

• 用箭头函数包裹回调调用，仅在点击触发时执行内部逻辑：

<TouchableOpacity onPress={() => clicked()}>

如果需要给回调传参，这种写法最方便，比如onPress={() => clicked('自定义参数')}。

• 用Function.prototype.bind绑定函数执行上下文和参数，返回一个待执行的新函数：

<TouchableOpacity onPress={clicked.bind(this)}>

需要传参时可以写成onPress={clicked.bind(this, '自定义参数')}。

内容的提问来源于stack exchange，提问作者bluepuma77