javascript - 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));
}
}
我怎样才能开始做我想要的?
谢谢你的帮助 :)
解决方案
推荐阅读
- python - 从“外部”目录导入模块 [Python]
- python - 来自初学者的简单 DataFrame 问题
- vue.js - Vue:导入 JSON 请求加载器
- python - 使用 Pandas Dataframe 时 casefold() 函数不起作用
- c++ - /bin/sh: cc: 找不到命令
- twig - 无法使用 Composer 安装 Twig
- expo - 错误:xcrun 以非零代码退出:4(expo ios 模拟器)
- javascript - 使用函数和数组计算/输出错误:不是数字
- google-apps-script - 我如何使用谷歌应用脚本发送一封电子邮件,其中包含一行中的信息,其中一个列中的条件
- reactjs - React-Router-Dom不渲染页面