如何在 React Native 中的单个 svg 对象上映射 onPress 事件？

Posted 2023-03-15

【中文标题】如何在 React Native 中的单个 svg 对象上映射 onPress 事件？

【英文标题】：How to map onPress events on single svg object in React Native?

【发布时间】：2015-10-05 17:21:59

【问题描述】：

我目前正在为我的大学论文使用 React Native 开发一个移动应用程序。我正在寻找创建类似的交互式地图，例如这里http://smudgeproof.net/siggraph.html，您可以在其中拥有建筑物内部的地图，并且您可以单击每个房间以显示有关该房间的一些附加信息的新窗口。

我应该能够在特定网站上创建此地图，然后使用上述功能将其显示在 up 中。我在考虑用 SVG 来处理这些东西。

我能够使用当前可用的 3rd 方库在屏幕上绘制 svg 地图，用于绘制 SVG，如 https://github.com/aksonov/react-native-svg-elements 不幸的是，这些库都不支持每个 svg 元素的 onpress 事件，以便能够在房间点击时显示描述屏幕。

我还应该补充一点，房间可能有很多不同的形状，所以不仅仅是矩形，这使得它无法仅使用元素来构建地图。

我会很感激任何帮助，或者如果你们能想出不同的解决方案来处理这个问题，我对 javascript 很熟悉，但还没有在 Objective-c 中为 ios 做过任何应用程序，所以我没有确定编写一个自定义模块来处理这个问题会有多难。

谢谢！

更新：以防万一有人尝试解决类似问题，我最终通过 WebView 显示这些 svg，并通过注入的 JavaScript 处理每个对象上的“按下”事件。无论如何感谢大家的帮助！ :)

【问题讨论】：

你试过用TouchableHighlight或TouchableWithoutFeedback包裹你的SVG元素吗？

已经尝试过了，不幸的是不适用于上面提到的任何 svg 库。仍在努力寻找解决这个问题的方法，因为这是阻碍我完成论文的唯一原因。

@JanŠimeček 在去年找到更好的解决方案？我还在寻找一个 React Native SVG 库，它可以让我将事件处理程序附加到单个 SVG 元素。谢谢！

【参考方案1】：

react-native-sgv 库现在提供对 onPress() 事件的支持。有关示例，请参见以下内容： https://github.com/react-native-community/react-native-svg

如果您想将 onClick 事件附加到一组元素，您可以使用 svg 库的 Symbol 组件将一组元素链接在一起，然后将 onPress 事件附加到将应用的任何元素到整个符号

【参考方案2】：

你试过@react-native-mapbox-gl/maps吗？？

这是一个非常好的处理 SVG 地图的包。

https://www.npmjs.com/package/@react-native-mapbox-gl/maps