React Native Skia中为独立按钮分配触摸事件的技术咨询

问题描述 #

我需要为React Native Skia中的独立按钮分配触摸事件，当前使用的代码如下：

<>
  <Canvas style={{ flex: 1 }}>
    <Fill color="#f2f2f2" />
    <OutborderButton x={45} y={150} svg={svg1} ix={33} iy={138} shade={shade} ></OutborderButton>
    <OutborderButton x={120} y={150} svg={svg2} ix={108} iy={138} shade={shade}></OutborderButton>
    <OutborderButton x={203} y={150} svg={svg3} ix={197} iy={140} shade={shade}></OutborderButton>
    <OutborderButton x={280} y={150} svg={svg4} ix={268} iy={138} shade={shade}></OutborderButton>
  </Canvas>
</>

生成的为一排自定义样式按钮，需指导如何为这些按钮添加触摸事件。

解决方案 #

React Native Skia提供了Touchable组件处理画布内的触摸交互，可通过以下两种方式实现：

方式一：在自定义OutborderButton组件内集成Touchable #

修改OutborderButton组件，将绘制内容包裹在Touchable中，并对外暴露点击回调：

import { Touchable } from '@shopify/react-native-skia';

const OutborderButton = ({ x, y, svg, ix, iy, shade, onPress }) => {
  return (
    <Touchable
      x={ix} // 触摸区域起始x坐标，需匹配按钮实际可点击范围
      y={iy} // 触摸区域起始y坐标
      width={/* 按钮实际宽度，例如SVG的宽度 */}
      height={/* 按钮实际高度，例如SVG的高度 */}
      onPress={onPress}
    >
      {/* 原有的按钮绘制内容，如SVG渲染、边框、阴影等代码 */}
    </Touchable>
  );
};

父组件使用时传入点击回调：

<>
  <Canvas style={{ flex: 1 }}>
    <Fill color="#f2f2f2" />
    <OutborderButton 
      x={45} y={150} svg={svg1} ix={33} iy={138} shade={shade} 
      onPress={() => console.log('按钮1被点击')}
    />
    <OutborderButton 
      x={120} y={150} svg={svg2} ix={108} iy={138} shade={shade}
      onPress={() => console.log('按钮2被点击')}
    />
    {/* 其余按钮同理配置 */}
  </Canvas>
</>

方式二：在父组件中用Touchable包裹单个按钮 #

若不想修改子组件，可直接在父组件中为每个按钮添加Touchable包裹：

import { Touchable } from '@shopify/react-native-skia';

<>
  <Canvas style={{ flex: 1 }}>
    <Fill color="#f2f2f2" />
    <Touchable
      x={33} y={138}
      width={/* 按钮1的宽度 */}
      height={/* 按钮1的高度 */}
      onPress={() => console.log('按钮1被点击')}
    >
      <OutborderButton x={45} y={150} svg={svg1} ix={33} iy={138} shade={shade} />
    </Touchable>
    {/* 其余按钮依次用Touchable包裹并配置参数 */}
  </Canvas>
</>

关键注意事项 #

• Touchable的x、y、width、height需精准匹配按钮的可点击区域，保证触摸范围与视觉按钮一致。
• 若按钮为不规则形状，可使用TouchablePath组件，通过自定义路径定义可触摸区域，适配非矩形按钮。

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