为什么TouchableOpacity在React Native Expo Snack中会自动触发onPress？

Question

我在 Expo Snack 中有一个小型 ReactNative 应用程序，其中包含一个带有 TouchableOpacity 的组件。

export default function AssetExample() {
  function clicked() {
    alert('clicked')
  }
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={clicked()}>  
        <Text style={styles.paragraph}>
          Click the icon
        </Text>
        <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
      </TouchableOpacity>  
    </View>
  );
}

每次启动应用程序时都会显示警报，这意味着 TouchableOpacity 会触发 onPress。为什么？我该如何避免这种情况？

Answer 1

您应该像这样将函数的引用传递给 TouchableOpacity

<TouchableOpacity onPress={clicked}>
</TouchableOpacity>

或者用箭头函数传递

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

因此只要需要（单击按钮），就会在 TouchableOpacity 组件内部调用它，否则它只会在渲染阶段调用一次。

查看这些文档以了解如何在 React 中处理事件 https://reactjs.org/docs/handling-events.html

为什么TouchableOpacity在React Native Expo Snack中会自动触发onPress？

Why does TouchableOpacity automatically trigger onPress in ReactNative Expo Snack?

react-native

expo