如何在React Native（iOS/Web）实现可拖拽、缩放、移动、删除的矩形并记录坐标？

我需要在同时支持iOS和Web的React Native项目中实现以下功能：

• 通过拖拽操作绘制矩形
• 绘制完成后可调整矩形的大小
• 能够移动矩形至任意位置
• 必要时可删除矩形
• 记录每个矩形的坐标信息

我了解到react-konva可以完美实现这类图形编辑功能，但它仅适配Web端React，无法兼容React Native。目前我尝试使用react-native-gesture-handler来实现，但效果远达不到预期，相关代码如下：

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
import Svg, { Circle, Polygon } from 'react-native-svg';
import { GestureEvent, PanGestureHandler, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';

const DrawRectangle = () => {
  const [start, setStart] = useState(null);
  const [end, setEnd] = useState({ x: 0, y: 0 });
  const [dimensions, setDimensions] = useState({ w: 0, h: 0 });

  const onPress = (event) => {
    const { x, y, translationX, translationY } = event.nativeEvent;
    if (!start) setStart({ x: y, y: x });
    setDimensions({ w: translationX, h: translationY });
  };

  const onEnd = () => {
    if (!start) return;

    setEnd(start);
    setStart(null);
  };

  return (
    <View style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={onPress} onEnded={onEnd}>
        <View style={{ width: '100%', height: '100%', backgroundColor: 'red' }}>
          <View
            style={{
              position: 'absolute',
              backgroundColor: 'blue',
              top: start?.x ?? end?.x,
              left: start?.y ?? end?.y,
              width: dimensions?.w ?? 0,
              height: dimensions?.h ?? 0
            }}
          />
        </View>
      </PanGestureHandler>
    </View>
  );
};

export default DrawRectangle;

恳请推荐适用于React Native（同时支持iOS和Web）的同类库或可行的实现方法，感谢帮助！

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