React native Airbnb Markers: Markers successfully disappear, but do not re-appear

问题

I am currently building an app with react-native and am using the Airbnb maps plugin to dynamically display markers. My markers are downloaded from the firebase database successfully, and the array that is downloaded always shows the correct contents. I have the full code here just in case https://codepen.io/yeni/pen/Kqyrxv?editors=0010 :)

Whenever I change the cur_user property of a marker to 1, it is successfully not shown on the map. However, when I change cur_user back to 0, the marker is not display (which would be the desired behavior). My code looks as follows:

    //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>)
  }

Also, the autorun is successfully triggered each time I change some data in the database (and the correct retrieved data is displayed). Is there potentially any way to put the autorun feature inside the render method to successfully rerender everything?

** EDIT ** I have also opened up an issue on the official github page, as this seems to be a bug. Correct me if I'm wrong! :) https://github.com/airbnb/react-native-maps/issues/1426

回答1:

The current solution I found is the following (I know it's highly inelegant, and I know it might be really unsafe as hitboxes might still exists [can hitboxes still exist?]), but simply rendering the markers and just hiding those by making radius to zero allows me to achieve this.

So I have the following marker render:

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>
          );

With the style property as defined here:

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'
  },

来源：https://stackoverflow.com/questions/44699115/react-native-airbnb-markers-markers-successfully-disappear-but-do-not-re-appea