React Native：如何通过代码触发屏幕任意位置的触摸事件？

在React Native中要通过代码触发任意位置的触摸事件，主要有两种可行方案：自定义原生模块实现（类似你提到的Flutter原生通道方案），或者使用第三方库。以下是具体细节：

一、自定义原生模块实现（推荐，可控性强） #

iOS 端实现 #

通过原生代码构造UITouch和UIEvent对象，模拟触摸的开始与结束动作：

1. 创建原生模块文件 RCTTouchSimulator.m：

#import <React/RCTBridgeModule.h>
#import <React/RCTEventDispatcher.h>

@interface RCTTouchSimulator : NSObject <RCTBridgeModule>
@end

@implementation RCTTouchSimulator

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(simulateTouchAtPoint:(CGFloat)x y:(CGFloat)y) {
  dispatch_async(dispatch_get_main_queue(), ^{
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    CGPoint point = CGPointMake(x, y);
    
    // 模拟触摸按下
    UITouch *touch = [[UITouch alloc] initWithWindow:window view:window];
    [touch setValue:[NSValue valueWithCGPoint:point] forKey:@"_locationInWindow"];
    UIEvent *event = [[UIEvent alloc] initWithEventType:UIEventTypeTouches];
    
    [window sendEvent:event];
    [window touchesBegan:[NSSet setWithObject:touch] withEvent:event];
    
    // 模拟触摸抬起
    [window touchesEnded:[NSSet setWithObject:touch] withEvent:event];
  });
}

@end

2. 在React Native中调用：

import { NativeModules } from 'react-native';

const { RCTTouchSimulator } = NativeModules;

// 触发屏幕(100, 200)位置的触摸事件
RCTTouchSimulator.simulateTouchAtPoint(100, 200);

Android 端实现 #

通过构造MotionEvent对象，向当前Activity注入触摸事件：

1. 创建原生模块文件 TouchSimulatorModule.java：

package com.yourprojectname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.view.MotionEvent;
import android.view.WindowManager;

public class TouchSimulatorModule extends ReactContextBaseJavaModule {

    private final ReactApplicationContext reactContext;

    public TouchSimulatorModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "TouchSimulator";
    }

    @ReactMethod
    public void simulateTouchAtPoint(float x, float y) {
        reactContext.runOnUiThread(() -> {
            WindowManager windowManager = reactContext.getSystemService(WindowManager.class);
            if (windowManager == null) return;

            // 构造触摸按下事件
            MotionEvent downEvent = MotionEvent.obtain(
                System.currentTimeMillis(),
                System.currentTimeMillis(),
                MotionEvent.ACTION_DOWN,
                x,
                y,
                0
            );
            windowManager.getDefaultDisplay().getRealMetrics(downEvent.getDeviceDisplayMetrics());
            reactContext.getCurrentActivity().dispatchTouchEvent(downEvent);

            // 构造触摸抬起事件
            MotionEvent upEvent = MotionEvent.obtain(
                System.currentTimeMillis(),
                System.currentTimeMillis(),
                MotionEvent.ACTION_UP,
                x,
                y,
                0
            );
            windowManager.getDefaultDisplay().getRealMetrics(upEvent.getDeviceDisplayMetrics());
            reactContext.getCurrentActivity().dispatchTouchEvent(upEvent);

            // 回收事件对象
            downEvent.recycle();
            upEvent.recycle();
        });
    }
}

2. 注册模块：在MainApplication.java的getPackages方法中添加模块：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加自定义模块包
    packages.add(new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new TouchSimulatorModule(reactContext));
            return modules;
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    });
    return packages;
}

3. 在React Native中调用：

import { NativeModules } from 'react-native';

const { TouchSimulator } = NativeModules;

// 触发屏幕(100, 200)位置的触摸事件
TouchSimulator.simulateTouchAtPoint(100, 200);

二、第三方库方案 #

如果不想自定义原生模块，可以尝试使用社区维护的第三方库（注意检查库的兼容性与维护状态），比如react-native-simulate-touch：

import simulateTouch from 'react-native-simulate-touch';

// 触发坐标(100, 200)的触摸事件
simulateTouch(100, 200);

关键注意事项 #

• 坐标转换：React Native中布局使用dp单位，而原生触摸事件基于真实像素，需要用PixelRatio转换：

  import { PixelRatio } from 'react-native';
  
  const realX = PixelRatio.getPixelSizeForLayoutSize(100);
  const realY = PixelRatio.getPixelSizeForLayoutSize(200);
  

• iOS权限：部分私有API在iOS新版本可能被限制，若遇到审核问题，需调整实现方式；
• Android线程：必须在UI线程触发触摸事件，避免线程安全问题。

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