React Native iOS如何获取按钮触摸事件的touch radius及radiusX/Y参数

核心结论 #

你无法直接获取到和Web端完全一致的radiusX、radiusY属性，但可以通过iOS端专属的触摸事件参数拿到等效的触摸区域半径信息，也可以通过原生扩展实现自定义字段映射。

基础实现：用官方自带参数获取半径 #

React Native iOS端的触摸事件原生对象已经暴露了长短轴半径属性，对应触摸区域的两个维度的半径值：

• majorRadius：触摸区域的长轴半径，单位为pt（点），对应Web端radiusX/radiusY中的较大值
• minorRadius：触摸区域的短轴半径，单位为pt（点），对应Web端radiusX/radiusY中的较小值

代码示例 #

import { Pressable, Text, Platform } from 'react-native';

const TouchTestButton = () => {
  const onTouchStart = (event) => {
    // 仅iOS端支持该参数
    if (Platform.OS !== 'ios') return;

    // 取第一个触摸点的原生事件数据
    const touchInfo = event.nativeEvent.touches[0];
    const { majorRadius, minorRadius } = touchInfo;
    
    // 业务逻辑处理，比如判断触摸面积大小
    console.log('长轴半径：', majorRadius, '短轴半径：', minorRadius);
  };

  return (
    <Pressable onTouchStart={onTouchStart}>
      <Text>点击测试触摸半径</Text>
    </Pressable>
  );
};

扩展实现：自定义映射radiusX/radiusY #

如果你的业务需要和Web端对齐字段名，或者需要额外处理轴向映射，可以通过原生扩展实现：

1. 在iOS原生层自定义触摸事件拦截逻辑，拿到系统原生UITouch实例的所有属性
2. 根据业务需要计算出对应轴向的radiusX、radiusY值
3. 通过React Native Bridge将自定义字段传递给JS层调用即可

注意：iOS系统原生的触摸事件本身没有区分X、Y轴向的半径，仅提供长短轴的半径值，所以无法做到和Web端100%一致的属性对应，只能通过长短轴结合触摸方向做近似映射。

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