Reactjs 如何在React Native中创建可点击的兴趣点？

我想知道如何在react native中创建这样的东西（参见图片），确切地说，我指的是可点击的兴趣点

有解决这个问题的组件吗

示例：

---

您可以制作一个

标记

组件，如下所示。这只是一个简单的演示，您可以根据需要修改它

Marker.js

import React from 'react'
import {TouchableOpacity} from 'react-native'


const Marker = ({onPress, top, left}) => (
    <TouchableOpacity onPress={onPress} style={{height: 10, width: 10, borderRadius: 5, backgroundColor: 'red', position: 'absolute', top, left}} />
)

export default Marker

从“React”导入React
从“react native”导入{TouchableOpacity}
常量标记=（{onPress，top，left}）=>(
)
导出默认标记

用法

import Marker from './Marker'

_onPress = () => //...Do the stuff here

render() {
        return (
            <ImageBackground style={{flex: 1}} source={{uri: 'https://s3.envato.com/files/214277896/us-map-html5.png'}} resizeMode={'stretch'}>
                <Marker onPress={this._onPress} top={100} left={200} />
            </ImageBackground>
        )
    }

从“./Marker”导入标记
_onPress=（）=>/…在这里做这些事情
render（）{
返回(
)
}

您可以创建一个TouchableOpacity组件，如上图所示，并将func传递给它。我如何才能做到这一点？是否可以使用touchableopacity固定点位置？您需要通过位置

绝对

和

x

，

y

手动固定点请举个例子好吗？对不起，我的react native技能很基本，如果我用地图图像更改背景颜色，它会响应？位置将根据屏幕方向保持固定，其余的可以是动态的。因此，这将是一个问题，因为我需要它基于图像的一部分。如果您将

图像

包裹在它周围，那么它将相对于

图像

。但是为了这个尝试，我需要用ImageBackground替换视图，对吗？