React Native中TouchableOpacity点击无响应问题求助（Expo环境）

核心问题：onPress参数错误 #

你当前代码里，TouchableOpacity的onPress直接写了console.log("Button pressed!")，这会在组件渲染时就触发日志输出，不是点击按钮时才执行。onPress必须接收一个函数引用，而非函数的执行结果。

修复后的代码 #

修改TouchableOpacity的onPress部分：

<TouchableOpacity onPress={() => console.log("Button pressed!")}>
  <View style={styles.nextButton}>
    <Text style={{ fontWeight: "bold", fontSize: 15 }}>Test</Text>
  </View>
</TouchableOpacity>

如果需要复用点击逻辑，也可以定义命名函数：

const handlePress = () => {
  console.log("Button pressed!");
};

// 在TouchableOpacity中使用
<TouchableOpacity onPress={handlePress}>
  {/* ...按钮内容 */}
</TouchableOpacity>

额外排查方向 #

• 检查是否有其他组件（比如透明View、绝对定位元素）覆盖在按钮上方，阻挡了触摸事件
• 确认SafeAreaView和ImageBackground的布局是否正常，保证按钮完全处于可触摸区域内（可临时给父组件加背景色排查）
• Expo环境下，确保react-native版本与当前Expo SDK版本兼容，版本不匹配可能引发组件异常

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