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

Question

我想知道我如何能够以原生的方式创建这样的东西（参见图片），我的意思是可点击的兴趣点。

是否有任何组件可以解决此问题？

示例：

Answer 1

您可以制作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 组件，如下所示。这只是一个简单的演示，您可以根据需要进行修改

<强> Marker.js

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>
        )
    }

<强>用法

display:block;