React Native Android端：如何从GestureResponderEvent获取指针工具类型？

React Native 自带的 GestureResponderEvent 并没有直接提供获取指针工具类型的能力，要实现和 Android 原生 MotionEvent.getToolType() 等效的功能，你需要通过自定义原生模块来扩展，以下是仅针对 Android 平台的具体实现步骤：

1. 创建 Android 原生模块 #

在你的 React Native 项目的 android/app/src/main/java/[你的包名]/ 目录下，新建工具类 PointerToolTypeModule.java：

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

public class PointerToolTypeModule extends ReactContextBaseJavaModule {
    public PointerToolTypeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public int getToolType(ReadableMap nativeEvent) {
        if (nativeEvent.hasKey("pointerId")) {
            int pointerId = nativeEvent.getInt("pointerId");
            // 获取当前页面根视图关联的MotionEvent（可根据实际场景优化事件获取逻辑）
            MotionEvent event = (MotionEvent) getCurrentActivity().getWindow().getDecorView().getRootView().getTag();
            if (event != null) {
                int index = event.findPointerIndex(pointerId);
                return event.getToolType(index);
            }
        }
        return -1; // 无法获取时返回标识值
    }

    // 提供工具类型常量映射，方便RN端直接调用
    @ReactMethod
    public int getToolTypeFinger() {
        return MotionEvent.TOOL_TYPE_FINGER;
    }

    @ReactMethod
    public int getToolTypeStylus() {
        return MotionEvent.TOOL_TYPE_STYLUS;
    }

    @ReactMethod
    public int getToolTypeMouse() {
        return MotionEvent.TOOL_TYPE_MOUSE;
    }

    @ReactMethod
    public int getToolTypeEraser() {
        return MotionEvent.TOOL_TYPE_ERASER;
    }
}

2. 注册原生模块 #

在同一目录下新建 CustomPackage.java 用于注册模块：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PointerToolTypeModule(reactContext));
        return modules;
    }

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

接着在 MainApplication.java 的 getPackages() 方法中添加自定义包：

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new CustomPackage());
    return packages;
}

3. React Native 端调用 #

在 RN 代码中结合手势事件获取指针类型：

import { NativeModules, View } from 'react-native';

const { PointerToolType } = NativeModules;

// 映射工具类型编码为可读字符串
const TOOL_TYPES = {
  [PointerToolType.getToolTypeFinger()]: 'Finger',
  [PointerToolType.getToolTypeStylus()]: 'Stylus',
  [PointerToolType.getToolTypeMouse()]: 'Mouse',
  [PointerToolType.getToolTypeEraser()]: 'Eraser',
  '-1': 'Unknown'
};

export default function App() {
  const handleTouchStart = async (e) => {
    const toolTypeCode = await PointerToolType.getToolType(e.nativeEvent);
    console.log('当前指针类型:', TOOL_TYPES[toolTypeCode]);
  };

  return (
    <View style={{ flex: 1 }} onTouchStart={handleTouchStart}>
      {/* 页面内容 */}
    </View>
  );
}

注意事项 #

• 原生模块中 MotionEvent 的获取逻辑可根据实际场景优化，比如通过自定义视图拦截触摸事件并存储 MotionEvent，能提升事件获取的可靠性。
• 确保 React Native 版本与原生代码 API 兼容，若遇编译问题可参考官方文档调整代码写法。

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