React Native 地图上的弹出标记性能缓慢

Question

我遇到的问题是在我的 React Native 应用程序中，我想显示带有标记的地图（3000 个标记）。我希望当我选择一个标记时，会出现一个弹出窗口。目前，我仅向此弹出窗口添加了信息，但将来我想向其中添加可能的操作。 我的程序工作得非常正确，但问题是，当我选择一个标记时，弹出窗口需要很长时间才能出现（1 分钟），并且需要同样长的时间才能关闭。

          {markers.map(marker => (
            <Marker
              key={marker.id}
              coordinate={marker.coordinate}
              title={marker.id}
              tracksViewChanges={false}
              image={getImageForStatus(marker.status, marker.flashed)}
              onPress={() => handleMarkerPress(marker)}
            />
          ))}
        </MapView>
      )}

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text>ID: {selectedMarker && selectedMarker.key}</Text>
            <Text>Status: {selectedMarker && selectedMarker.status}</Text>
            <Text>Last Status Update: {selectedMarker && selectedMarker.lastStatusUpdate}</Text>
            <Text>Name: {selectedMarker && selectedMarker.title}</Text>
            <Text>Description: {selectedMarker && selectedMarker.description}</Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

我希望当我按下标记时立即出现弹出窗口。你知道这个问题可能来自哪里吗？

Answer 1

所以解决这个问题的方法是不使用默认的react-native模式。从提供的示例来看，一旦您调用 setModalVisible，您将重新渲染整个地图和 3000 个标记，我猜反应会等到标记再次在屏幕上绘制，然后显示弹出窗口。

解决方案：

• 尝试使用聚类https://github.com/venits/react-native-map-clustering - 这样您将需要更少的标记来重新绘制。

• 尝试使用不涉及组件状态更改的弹出窗口/模式，这根本不会重绘标记。 https://github.com/gorhom/react-native-bottom-sheet。这个库使用引用来显示模式，并且速度非常快。