React 原生地图标注渲染

Question

我正在使用react-native-maps来显示我所在地区的火车站的标记。每个标记都有一个标注，其中包含接近列车的实时数据。

问题是;每个标注都在地图上的每个标记的背景中渲染。此外，每个标注都会被重新渲染，因为我有来自实时 API 的新数据。这会导致呈现数百个视图，即使我只需要 pressed.app 屏幕截图的标记标注

有没有办法确保在用户按下特定标记之前不会呈现标注？印刷后;我还想确保仅呈现和显示该特定标记的标注。

我的代码：

地图屏幕：

const MapScreen = props => {
// get user location from Redux store
// this is used to center the map
const { latitude, longitude } = useSelector(state => state.location.coords)
// The MapView and Markers are static
// We only need to update Marker callouts after fetching data
return(
<SafeAreaView style={{flex: 1}}>
<MapView
style={{flex: 1}}
initialRegion={{
latitude:  parseFloat(latitude) || 37.792874,
longitude: parseFloat(longitude) || -122.39703,
latitudeDelta: 0.06,
longitudeDelta: 0.06
}}
provider={"google"}
>
<Markers />
</MapView>
</SafeAreaView>
)
}
export default MapScreen

标记组件：

const Markers = props => {
const stationData = useSelector(state => state.stationData)
return stationData.map((station, index) => {
return (
<MapView.Marker
key={index}
coordinate={{
// receives station latitude and longitude from stationDetails.js
latitude: parseFloat(stationDetails[station.abbr].gtfs_latitude),
longitude: parseFloat(stationDetails[station.abbr].gtfs_longitude)
}}
image={stationLogo}
zIndex={100}
tracksInfoWindowChanges={true}
>
<MapView.Callout
key={index}
tooltip={true}
style={{ backgroundColor: "#ffffff" }}
>
<View style={styles.calloutHeader}>
<Text style={{ fontWeight: "bold" }}>{station.name}</Text>
</View>
<View style={styles.calloutContent}>
<StationCallout key={index} station={stationData[index]} />
</View>
</MapView.Callout>
</MapView.Marker>
);
});
};

工作站标注组件：

const StationCallout = (props) => {
return(
props.station.etd.map((route, index) => {
const approachingTrains = function() {
trainText = `${route.destination} in`;
route.estimate.map((train, index) => {
if (index === 0) {
if (train.minutes === "Leaving") {
trainText += ` 0`;
} else {
trainText += ` ${train.minutes}`;
}
} else {
if (train.minutes === "Leaving") {
trainText += `, 0`;
} else {
trainText += `, ${train.minutes}`;
}
}
});
trainText += " mins";
return <Text>{trainText}</Text>;
};
return <View key={index}>
{approachingTrains()}
</View>;
})
)
};
export default StationCallout

Answer 1

在 ComponentDidMount 上，您应该获取所有列车的数据，以便可以在其位置上设置所有标记。 您可以使用Firebase的once('value'(事件来执行此操作 此事件仅在调用引用时从引用中获取一次数据，因此您将在组件确实挂载时调用它。

阅读更多关于一次("价值"(

现在，由于所有指针都位于其位置上，因此用户可以单击任何一个指针来跟踪它的运动，对吗？

所以每个指针都必须有一些独特的东西，比如火车 ID 或我不知道你的数据库结构的东西，所以我假设你有训练 ID， 现在，在标记的 onPress 函数中，您应该传递此 TrainID。

例：

onPress={()=> this.TrackSpecificTrain(trainID)  }

现在TrackSpecificTrain函数中，您应该使用火车ID和firebase on('value'(事件调用数据库引用，现在您将不断获取所选火车的实时数据，并且您可以使用来自Firebase的新数据更新本地状态stationData。

例

TrackSpecificTrain=(trainID)=>{
const ref = database().ref(`YourTrainsRef/${trainID}/`)
ref.on('value',( snapshot)=>{
//Update your local state with new data in snapshot
})
}

RemoveTracker=(trainID)=>{
const ref = database().ref(`YourTrainsRef/${trainID}/`)
ref.off("value")
}

现在这里我们也使用RemoveTracker因为如果用户单击另一个标记，您可能需要停止跟踪以前的火车，以便它将开始跟踪新标记上的 trainID 并停止跟踪上一个！

Answer 2

我自己实际上找到了答案。我创建了对每个标记的引用，然后将 onPress 属性传递给并将 showCallout 属性传递给其标注组件。

标记组件：

export default function Markers() {
const {
stations: { station }
} = require("../../bartData/stations");
const [clickedMarkerRef, setClickedMarkerRef] = useState(null)
return station.map((trainStation, index) => {
return (
<MapView.Marker
key={trainStation.abbr}
coordinate={{
latitude: parseFloat(trainStation.gtfs_latitude),
longitude: parseFloat(trainStation.gtfs_longitude)
}}
image={Platform.OS === "ios" ? station_ios : station_android}
zIndex={100}
tracksInfoWindowChanges={true}
onPress={() => setClickedMarkerRef(index)}
>
<CalloutContainer
key={trainStation.abbr}
stationName={trainStation.name}
stationAbbr={trainStation.abbr}
showCallOut={clickedMarkerRef === index}
/>
</MapView.Marker>
);
});
}

标注组件仅在 showCallOut 为真时获取数据。在标注组件中

useEffect(() => {
if (props.showCallOut === true) {
fetchTrainDepartures();
const intervalId = setInterval(fetchTrainDepartures, 10000);
return () => clearInterval(intervalId);
}
}, []);

因此，除非您单击标记，否则本地状态将保持为 null，并且标注不会获取任何数据。

当您单击索引 0 处的标记时：

• 单击标记引用现在为 0。
• showCallout is true => {clickMarkerRef === index}
在 Callout
• 上.js useEffect hook 下的文件 => props.showCallout 为 true。
• 仅为此标注提取数据。