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

时间:2015-10-05 17:21:59

标签: javascript ios svg react-native

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

我应该能够在特定网站上创建此地图,然后使用上述功能向上显示。我正在考虑使用SVG处理这些问题。

我能够使用当前可用的第三方库在屏幕上绘制svg地图来绘制像https://github.com/aksonov/react-native-svg-elements这样的SVG,遗憾的是这些库中没有一个支持每个svg元素的onpress事件,以便能够在房间显示描述屏幕点击。

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

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

谢谢!

更新:为了防止有人试图解决类似的问题,我最终通过WebView显示这些svgs,并通过注入的JavaScript处理每个对象上的'press'事件。无论如何,感谢大家的帮助! :)

2 个答案:

答案 0 :(得分:1)

react-native-sgv库现在支持onPress()事件。请参阅以下示例: https://github.com/react-native-community/react-native-svg

如果要将onClick事件附加到一组元素,可以使用svg库的Symbol组件将一组元素链接在一起,将onPress事件附加到任何元素上将适用于整个符号

答案 1 :(得分:0)

您尝试过@react-native-mapbox-gl/maps吗?

这是处理SVG地图的很好的软件包。

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