React Native中View组件onPress事件绑定未触发问题

React Native 内置基础View组件本身不支持onPress点击事件，这是事件绑定失效的核心原因：

• Text、Image这类组件默认封装了触摸响应逻辑，直接绑定onPress可以触发
• 基础View仅作为布局容器使用，默认不处理触摸事件，绑定onPress不会生效

将需要响应点击的外层View替换为RN官方提供的可触摸组件即可，两种常用选择：

方案1：使用TouchableOpacity（自带点击透明度反馈，适合常规按钮场景） #

修改Dice.js代码如下：

import react from "react";
import { StyleSheet, Image, TouchableOpacity } from "react-native";

import { test } from "./Boxes";

export default class Dice extends react.Component {
  render() {
    return (
      <TouchableOpacity 
        style={styles.circle} 
        onPress={test}
        activeOpacity={0.7} // 点击时透明度变为70%，可按需调整
      >
        <Image
          source={require("../assets/icon-dice.png")}
          style={styles.dice}
        />
      </TouchableOpacity>
    );
  }
}

方案2：使用Pressable（RN 0.63版本后官方推荐的通用按压组件，自定义交互灵活度更高） #

修改Dice.js代码如下：

import react from "react";
import { StyleSheet, Image, Pressable } from "react-native";

import { test } from "./Boxes";

export default class Dice extends react.Component {
  render() {
    return (
      <Pressable style={styles.circle} onPress={test}>
        <Image
          source={require("../assets/icon-dice.png")}
          style={styles.dice}
        />
      </Pressable>
    );
  }
}

额外注意：当前代码存在循环依赖隐患：Boxes.js导入了Dice.js，Dice.js又反向从Boxes.js导入test方法，项目复杂度提升后很容易出现导入值为undefined的报错，建议把公共方法抽离到独立的工具文件中存放，避免循环引用。

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