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

Jan*_*ček 6 javascript svg ios react-native

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

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

我能够使用当前可用的第三方库在屏幕上绘制svg地图,以绘制SVG,例如https://github.com/aksonov/react-native-svg-elements,不幸的是,这些库都不支持每个svg元素的onpress事件。点击房间后即可显示说明屏幕。

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

我将不胜感激,或者如果您能提出不同的解决方案来解决此问题,我对Java语言很熟悉,但是还没有在Objective-C中完成任何针对iOS的应用程序,因此我不确定有多难这将是编写一个自定义模块来处理此问题。

谢谢!

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

Iri*_*ich 2

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

如果您想将 onClick 事件附加到一组元素,您可以使用Symbolsvg 库的组件将一组元素链接在一起,并将 onPress 事件附加到将应用于整个符号的任何元素