React Native实时获取鼠标坐标及Touchable触摸无响应问题

别担心，新手遇到这种问题太正常了，我们一步步来排查和解决：

首先，你可能用错了Touchable组件类型 #

React Native里没有直接叫<Touchable>的基础组件，你需要用具体的实现类，比如TouchableWithoutFeedback或者TouchableOpacity。其中TouchableWithoutFeedback更适合这种需要监听连续触摸（比如绘图）的场景，因为它不会有视觉反馈干扰画布。

其次，Canvas可能拦截了触摸事件 #

react-native-canvas的底层是原生视图，有时候会抢占上层Touchable的触摸事件。我们可以换个思路：把触摸监听放到包裹Canvas的容器上，直接使用原生的触摸事件（onTouchStart/onTouchMove/onTouchEnd），而不是依赖Touchable组件的press类事件。

修改后的示例代码 #

import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, TouchableWithoutFeedback, Alert } from 'react-native';
import Canvas from 'react-native-canvas';

export default class App extends Component {
  canvas = null;
  ctx = null;

  handler = (canvas) => {
    if (canvas) {
      this.canvas = canvas;
      canvas.width = Dimensions.get('window').width;
      canvas.height = Dimensions.get('window').height;
      this.ctx = canvas.getContext('2d');
      // 设置全屏黑色背景
      this.ctx.fillStyle = 'black';
      this.ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
  };

  handleTouchStart = (e) => {
    // 获取触摸点坐标，React Native原生事件里的locationX/Y是相对当前组件的坐标
    const { locationX, locationY } = e.nativeEvent;
    Alert.alert("TouchStart", `X: ${locationX}, Y: ${locationY}`);
    // 初始化绘图路径
    this.ctx.beginPath();
    this.ctx.moveTo(locationX, locationY);
  };

  handleTouchMove = (e) => {
    const { locationX, locationY } = e.nativeEvent;
    // 绘制连续线条
    this.ctx.lineTo(locationX, locationY);
    this.ctx.strokeStyle = 'white';
    this.ctx.lineWidth = 2;
    this.ctx.stroke();
  };

  handleTouchEnd = () => {
    Alert.alert("TouchEnd");
    this.ctx.closePath();
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback
          onTouchStart={this.handleTouchStart}
          onTouchMove={this.handleTouchMove}
          onTouchEnd={this.handleTouchEnd}
        >
          <Canvas ref={this.handler} style={styles.canvas} />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  canvas: {
    width: '100%',
    height: '100%',
  },
});

关键修改点说明 #

• 替换了<Touchable>为官方提供的TouchableWithoutFeedback组件
• 使用onTouchStart/onTouchMove/onTouchEnd事件，更适配绘图这种需要跟踪连续触摸的场景
• 在handler里正确初始化了Canvas的宽高和绘图上下文，确保画布全屏显示
• 给Canvas添加了明确的样式，保证它占满父容器空间

额外排查点 #

1. 确保你已经正确安装并完成了react-native-canvas的配置（新版RN自动链接，旧版可能需要手动链接原生依赖）
2. 检查是否有其他组件覆盖在Touchable容器上方，导致触摸事件被拦截
3. 如果还是无响应，可以尝试把Canvas嵌套在一个普通View里，给这个View添加触摸事件，再嵌套Canvas

内容的提问来源于stack exchange，提问作者J-Cake