React Native TouchableOpacity 加载自动触发点击、按下无响应问题咨询

问题原因 #

你在TouchableOpacity的onPress属性中错误使用了逗号运算符：

• JS解析onPress={(console.log('asda'), () => navigation.navigate('Home'))}时，会在组件渲染阶段立即执行逗号左侧的console.log('asda')，之后才会将逗号右侧的跳转箭头函数赋值给onPress
• 这就是为什么页面加载时就会打印日志，点击按钮时只执行跳转逻辑、没有日志输出的原因

修复方案 #

把console.log移动到onPress绑定的箭头函数内部即可：

<TouchableOpacity
  onPress={() => {
    console.log('asda')
    navigation.navigate('Home')
  }}>
  <Image
    style={s.icon}
    source={require('../../assets/icon/home.png')}
  />
  {active == 0 ? <View style={s.iconActive} /> : <View />}
</TouchableOpacity>

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