如下面代码所示,假如我想用Shape封装成一个Rect,那么如何给Rect添加相应的onPress事件呢?
PS: 不是给最外面一层容器套一个Touchablexxx,而是给Shape这类react-native art中的component添加事件。(试了PanResponder,好像也不行。。。)
const teset = () => {
const teseRects = [
{x: 0, y: 0, width: 40, height: 40},
{x: 60, y: 0, width: 40, height: 40},
{x: 60, y: 60, width: 40, height: 40},
{x: 0, y: 60, width: 40, height: 40},
];
return (
<Surface>
{teseRects.map((item, index) => {
return (
<Rect
{...item}
fill={'red'}
onPress={() => {alert(index)}}
/>
);
})}
</Surface>
);
}
const Rect = (props) => {
const {x, y, width, height, fill, onPress} = props;
const path = new Path()
.moveTo(x, y)
.lineTo(x + width, y)
.lineTo(x + width, y+ height)
.lineTo(x, y + height)
.close();
return <Shape d={path} fill={fill}/>;
};