将 Touch 事件分配给按钮 React Native Skia

Question

Want to assign touch event to individual button (React native skia) Current code is

    <>
  <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>
</>

and output buttons looks like these

enter image description here

Answer 1

You could overlay a Pressable or TouchableOpacity over your canvas and control it from there. Alternatively, you can split the canvas and wrap the elements with pressables.

There is a discussion about this here