首页 > 解决方案 > react native 中的新模态 onpress 标记

问题描述

我试图了解它在 React Native 中是如何工作的模式

我想要的是,当我点击标记时,它会显示特定标记的不同信息(标题、描述、名称)。

我有的:

export default class MapsScreen extends React.Component {
state = { reports: [] }

componentDidMount() {
    // call api
}

mapMarkers = () => {
    return this.state.reports.map((report) => <Marker
    key={report.key}
    title={report.name}
    coordinate={{ latitude: report.latitude, longitude: report.longitude }}
    title={report.name}
    description={report.description}
    onPress={this._onMarkerPress.bind(this, this.state.reports.filter(r => r.key === report.key ))}

    >
    </Marker >)
}

render() {
    return (
        <MapView
        style={{ ...StyleSheet.absoluteFillObject }}
        initialRegion={{
            latitude: 52.0,
            longitude: -0.98,
            latitudeDelta: 10,
            longitudeDelta: 5
        }} >
        {this.mapMarkers()}
        
        </MapView>
        );
    }

    _onMarkerPress (markerData) {
        console.log(JSON.stringify(markerData));
    }
}

我怎样才能开始做我想要的?

谢谢你的帮助 :)

标签: javascriptreactjsreact-native

解决方案


推荐阅读