React Native MapView-按列表项选择标记

Question

我试图在mapView组件中组合我的标记，这是一个标记列表，在按下每个项目时，它会自动选择地图上的标记。

我已经创建了一个mapView、标记列表，并为每个标记创建了引用。但我没能成功地完成选拔。在这里的文档中，我找到了isPreselected道具，但它只适用于IOS，我也在为android搜索解决方案。

这是我的代码：

import MapView, { Marker } from "react-native-maps";
import {
StyleSheet,
Text,
View,
Dimensions,
FlatList,
Button,
} from "react-native";
import { createRef, useRef } from "react";
export default function App() {
const mapRegions = [
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -122.4324,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -123.4324,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -120.4324,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -121.4324,
},
},
];
const markerRef = useRef(mapRegions.map(() => createRef()));
const selectLocation = (index) => {
const ref = markerRef.current[index].current;
console.log(ref);
};
return (
<View style={styles.container}>
<MapView style={styles.map}>
{mapRegions.map((r, index) => (
<Marker
ref={markerRef.current[index]}
coordinate={r.location}
key={r.location.latitude}
title="Marker"
/>
))}
</MapView>
<View>
<FlatList
data={mapRegions}
keyExtractor={(region) => region.location.latitude.toString()}
renderItem={({ item, index }) => (
<View>
<Text>{item.name}</Text>
<Button
title="see location"
onPress={() => selectLocation(index)}
/>
</View>
)}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
map: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
});

Answer 1

我找到了解决方案。我只需要为MapView组件设置一个引用，并使用animateToRegion()方法来接收动画的位置和持续时间，就可以为每个Marker提供一个引用。我还必须为位置数组定义latitudeDelta和longitudeDelta属性。

这是当前代码：

import * as React from "react";
import MapView, { Marker } from "react-native-maps";
import {
StyleSheet,
Text,
View,
Dimensions,
FlatList,
Button,
} from "react-native";
import { useRef } from "react";
export default function App() {
const mapRegions = [
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -122.4324,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -123.4324,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -120.4324,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
},
{
name: "place-one",
location: {
latitude: 41.78825,
longitude: -121.4324,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
},
];
const mapRef = useRef(null);
const selectLocation = (region) => {
mapRef.current.animateToRegion(region, 1000);
};
return (
<View style={styles.container}>
<MapView ref={mapRef} style={styles.map}>
{mapRegions.map((r, index) => (
<Marker
coordinate={r.location}
key={r.location.longitude.toString()}
title="Marker"
/>
))}
</MapView>
<View>
<FlatList
data={mapRegions}
keyExtractor={(region) => region.location.longitude.toString()}
renderItem={({ item, index }) => (
<View>
<Text>{item.name}</Text>
<Button
title="see location"
onPress={() => selectLocation(item.location)}
/>
</View>
)}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
map: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
});