React native：如何在地图上更新标记？

Question

我有一张 class 地图，我从数据库中获取标记并将它们映射到地图屏幕上。我正在尝试显示在数据库中更改但仅在我刷新应用程序时才有效的新标记。

部分代码：

componentDidMount() {
   
   ... 
})
// get markers from DB
    markerRef.get()
    .then(querySnapshot => {
      // console.log('Total users: ', querySnapshot.size);
      const markers = [];
      // if(querySnapshot)
      querySnapshot.forEach(res => {
        const {title, info, latitude, longitude, imageUri} = res.data()
        markers.push({
          latitude,
          longitude,
          title,
          info,
          imageUri,
          id: res.id
        })
      });
      this.setState({
        markers,
      })
    });
    

  }

在我的渲染中，我映射了标记：

  this.state.markers.map(marker => (
          //  <<<<~~~~ I think those 2-3 lines are matter
          <MapView.Marker
            key={marker.id}
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
            onPress={(e)=>this.onMarkerPress(e, marker)} //
            >
            
              <MapView.Callout tooltip
                      onPress={() => this.setState({infoModal: 'true', markerUrl: marker.imageUri})}
              
              >
                <View style={{backgroundColor: 'white'}} >
                      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
                        {/* {marker.imageUri &&  <Image source = {{uri:marker.imageUri}} //{{uri: marker.imageUri}}
                        style = {{ width: '90%', height: 200, justifyContent: 'center', flex: 1,}}
                        resizeMode="center"
                      /> }         */}
                      </View>
                    <Text>Lat: {marker.latitude}, Lon: {marker.longitude}</Text>
                    <Text>{marker.email}</Text>
                    <TouchableOpacity onPress={() => this.setState({infoModal: 'true', markerUrl: marker.imageUri})}>
                      <Text style={{color: 'blue'}}> info </Text>
                    </TouchableOpacity>
                </View>
              </MapView.Callout>         
          </MapView.Marker>
        ))
      }

我的问题是当我更新数据库中的标记时（例如添加 marker/set 可见 - 将道具状态更改为可见）它不会在地图上刷新，只有在我再次打开应用程序后才会显示。

有什么方法可以刷新它以便在我进行一些更改后它会在地图上呈现？

Answer 1

那是因为你只有在你的组件挂载时才从数据库中获取标记，因为你正在调用componentDidMount中的数据获取方法。因此，这将无法捕获对数据库的后续更改，这些更改只会在您重新加载这些组件时反映出来，这发生在您 'open the app again'.

您可以研究将 get 替换为 onSnapshot 以实例化一个侦听器，该侦听器将在数据库更新时调用：https://firebase.google.com/docs/firestore/query-data/listen

React native：如何在地图上更新标记？

React native: how to get markers update on map?

react-native

react-native-maps