React Native - 缩放图像时如何触摸和响应图像中的点？

Question

我使用React Native构建应用程序。

我有图像如下：

现在，我想要缩放它并触摸图像上的点（图像上的数字 10、16、17...）。查看谷歌地图及其上的位置时类似。

关于缩放，我使用滚动视图遵循教程：https://medium.com/@mheavers/animating-zoom-in-react-native-scroll-view-16587b35a064

关于点，我想向这些点添加图标并触摸它们。

那么，有没有什么解决方案可以做到这一点，以便变焦仍然存在？

谢谢！

更新

关于照片上的点，我使用position解决了。

看上去不错：

import React, { Component } from 'react'
import { ScrollView, Image, TouchableHighlight, Dimensions,Text} from 'react-native'
const {deviceWidth,deviceHeight} = Dimensions.get('window');
const points = [
    {top:290,left:280,icon:require('./assets/icon.png')},//icon demo
    {top:320,left:290,icon:require('./assets/icon.png')},//icon demo
    {top:480,left:590,icon:require('./assets/icon.png')},//icon demo
    {top:740,left:780,icon:require('./assets/icon.png')},//icon demo
];
export default class ZoomView extends Component {
    static defaultProps = {
        doAnimateZoomReset: false,
        maximumZoomScale: 2,
        minimumZoomScale: 1,
        zoomHeight: deviceHeight,
        zoomWidth: deviceWidth,
    }
    handleResetZoomScale = (event) => {
        this.scrollResponderRef.scrollResponderZoomTo({
            x: 0,
            y: 0,
            width: this.props.zoomWidth,
            height: this.props.zoomHeight,
            animated: true
        })
    }
    setZoomRef = node => { //the ScrollView has a scrollResponder which allows us to access more methods to control the ScrollView component
        if (node) {
            this.zoomRef = node
            this.scrollResponderRef = this.zoomRef.getScrollResponder()
        }
    }
    render() {
        return (
            <ScrollView
                contentContainerStyle={{ alignItems: 'center', justifyContent: 'center' }} //flexbox styles
                centerContent //centers content when zoom is less than scroll view bounds
                maximumZoomScale={this.props.maximumZoomScale}
                minimumZoomScale={this.props.minimumZoomScale}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                ref={this.setZoomRef} //helps us get a reference to this ScrollView instance
                style={{ overflow: 'hidden',position:'relative' }}
            >

                    <Image
                        source={this.props.source}
                    />
                {points.map(p => <TouchableHighlight style={{position:'absolute',zIndex:10,top: p.top,start:p.left,fontWeight:'bold',color:'#10ee00' }} onPress={()=>{}}>
                    <Image source={p.icon}/>
                </TouchableHighlight>)}

            </ScrollView>
        )
    }
}

但我不确定这是否是最佳解决方案。