React Native Airbnb Markers:标记成功消失,但没有重新出现

2024-03-19

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

每当我改变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 https://github.com/airbnb/react-native-maps/issues/1426


我找到的当前解决方案如下(我知道它非常不优雅,而且我知道它可能真的不安全,因为碰撞盒可能仍然存在[碰撞盒仍然存在吗?]),但只需渲染标记并通过将半径设置为零让我能够实现这一目标。

所以我有以下标记渲染:

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

使用此处定义的 style 属性:

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'
  },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native Airbnb Markers:标记成功消失,但没有重新出现 的相关文章

随机推荐