【问题标题】:How to react to SVG events in React Native?如何在 React Native 中对 SVG 事件做出反应?
【发布时间】:2016-06-17 08:04:32
【问题描述】:

问题的前奏:

我打算在 React Native 中创建一个超级简单的 SVG 编辑器,具有以下功能:

  1. 向 SVG 添加一个新圆
  2. 调整圆圈大小
  3. 移动圆圈
  4. 删除圆圈。

不清楚的是,我如何在 React Native 中对 SVG 事件做出反应。 (SVG 事件和 DOM 事件(对于 React Native)一样吗?)

我在 Google 上搜索了“svg editor react native”、“svg react native events”,我发现:

  1. https://github.com/magicismight/react-native-svg,好像不支持事件。

  2. https://github.com/brentvatne/react-native-svgkit 也不支持事件(虽然有计划)。

问题

如果用户在 SVG 中点击或拖动圆圈,我如何在 React Native 中对该事件做出反应?

编辑1:

进一步的谷歌搜索表明 React Native 不支持 SVG(目前)。

仅使用 SVG + ReactJS + Cordova 来实现这个目标会更容易吗(即使用 React 编写一个简单的 SVG 编辑器并将其部署到手机上)?

EDIT2:

在谷歌搜索之后,http://reapp.io/ 似乎是最简单的方法。

【问题讨论】:

    标签: react-native svg dom-events


    【解决方案1】:

    https://github.com/magicismight/react-native-svg,好像不支持事件。

    确实如此,例如

    <Circle cx={10} cy={10} r={20} onPress={()=>{console.log('pressed')}}/>
    

    查看PanResponder example 以了解更复杂的触摸处理,例如拖动。

    经过一番谷歌搜索,http://reapp.io/ 似乎是最简单的方法。

    但据我所知,这不是 React-Native,对吧?

    【讨论】:

    • 这听起来很容易成为事实,但就是这么简单。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2015-01-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-21
    • 1970-01-01
    相关资源
    最近更新 更多