我目前正在構建一個具有反應原生的應用程序,並且正在使用Airbnb地圖插件來動態顯示標記。我的標記已成功從Firebase數據庫下載,並且下載的數組始終顯示正確的內容。我有這裏完整的代碼,以防萬一https://codepen.io/yeni/pen/Kqyrxv?editors=0010 :)反應原生Airbnb標記:標記成功消失,但不會重新出現
每當我將標記的cur_user
屬性更改爲1
,它成功不會顯示在地圖上。但是,當我將cur_user
更改回0
時,標記不顯示(這將是所需的行爲)。我的代碼如下:
//Store file MarkersStore.js
class MarkersStore {
@observable markers = [];
constructor() {
console.log("Started downloading markers");
var localMarkers = [];
Fb.bikes.on('value', (snap) => {
localMarkers = [];
snap.forEach((marker) => {
localMarkers.push({
longitude: parseFloat(marker.val().positionLng),
latitude: parseFloat(marker.val().positionLat),
description: "Bike 1",
title: "b" + String(marker.val().bike_no),
bike_no: marker.val().bike_no,
cur_user: marker.val().current_user,
key: marker.getKey()
})
});
//Once must make sure that the upper command already finished executing!
this.markers.replace(localMarkers);
console.log("Loaded markers");
});
}
}
...
//Rendering file MarkersComponent.js
render() {
var renderingMarkers = this.fbMarkers.markers.slice() || [];
console.log("fbMarkers are: ");
console.log(this.fbMarkers.markers.slice());
console.log("Rendering stuff..");
console.log(renderingMarkers);
console.log("Rendering ALL the stuff!");
return (<View>
{renderingMarkers.map((marker) => {
console.log("Markers are re-rendered");
console.log(marker.bike_no);
console.log(marker.cur_user);
//All console logs up until here show correct results
return (
<View key={marker.bike_no}>{ (marker.cur_user == 0) ?
<MapView.Marker
navigator={this.props.navigator}
key={marker.bike_no}
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
title={marker.title}
description={marker.description}
onPress={(coord, pos) => this.startBookingBike(marker.bike_no)}
><View style={styles.bikeRadius}><View style={styles.bikeMarker}>
</View></View>
</MapView.Marker> : null
}</View>
);
})}</View>)
}
此外,自動運行成功的每個更改數據庫中的一些數據的時間(和正確檢索到的數據顯示)觸發。是否有可能將自動運行功能置於渲染方法中以成功重新渲染所有內容?
**編輯** 我也在官方的github頁面上打開了一個問題,因爲這似乎是一個錯誤。如我錯了請糾正我! :) https://github.com/airbnb/react-native-maps/issues/1426