4

我目前正在構建一個具有反應原生的應用程序,並且正在使用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

回答

0

我發現的當前解決方案如下(我知道它非常不雅,而且我知道它可能真的不安全,因爲hitbox可能仍然存在[可以使用hitboxes嗎?]),但只需渲染標記和通過使半徑爲零來隱藏這些可以讓我實現這一點。

所以我有以下標記渲染:

return (
      <View key={marker.bike_no}> 
      { <MapView.Marker 
      navigator={this.props.navigator} 
      coordinate={{longitude: marker.longitude, latitude: marker.latitude}} 
      title={marker.title} 
      description={marker.description} 
      onPress={(coord, pos) => this.startBookingBike(marker.bike_no)} 
      key={marker.key} 
      ><View style={(marker.cur_user == 0) ? styles.bikeRadius : styles.markerStyleHidden }><View style={styles.bikeMarker}> 
      </View></View> 
      </MapView.Marker> 
      }</View> 
     ); 

隨着樣式屬性的定義如下:

markerStyleHidden: { 
    height: 0, 
    width: 0, 
    borderRadius: 0, 
    overflow: 'hidden', 
    backgroundColor: 'rgba(0, 122, 255, 0.5)', 
    borderWidth: 0, 
    borderColor: 'rgba(0, 122, 255, 0.5)', 
    alignItems: 'center', 
    justifyContent: 'center' 
    }, 
    radius: { 
    height: 30, 
    width: 30, 
    borderRadius: 30/2, 
    overflow: 'hidden', 
    backgroundColor: 'rgba(0, 122, 255, 0.5)', 
    borderWidth: 4, 
    borderColor: 'rgba(0, 122, 255, 0.5)', 
    alignItems: 'center', 
    justifyContent: 'center' 
    },