反应原生Airbnb标记：标记成功消失，但不会重新出现 [英] React native Airbnb Markers: Markers successfully disappear, but do not re-appear

问题描述

我目前正在使用react-native构建应用程序，并使用Airbnb地图插件动态显示标记。我的标记已成功从firebase数据库下载，并且下载的数组始终显示正确的内容。我在这里有完整的代码，以防 https://codepen.io/yeni/pen / Kqyrxv？editors = 0010 ：）

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

每当我将标记的 cur_user 属性更改为 1 ，它已成功显示在地图上。但是，当我将 cur_user 更改回 0 时，标记不会显示（这将是所需的行为）。我的代码如下所示：

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

此外，每次更改数据库中的某些数据时都会成功触发自动运行（并显示正确的检索数据）。是否有可能以任何方式将自动运行功能放在render方法中以成功重新呈现所有内容？

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?

**编辑**
我也开放了一个问题在官方的github页面上，因为这似乎是一个bug。如我错了请纠正我！ :) https://github.com/airbnb/react-native-maps/ issue / 1426

推荐答案

我找到的当前解决方案如下（我知道它非常不优雅，我知道它可能真的不安全，因为hitbox可能仍然存在[hitboxes仍然存在？]），但只是渲染标记并通过使半径为零隐藏它们允许我实现这一点。

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

这篇关于反应原生Airbnb标记：标记成功消失，但不会重新出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！