react-native - 加载新元素时保持地图以标记为中心

Question

我正在加载一个带有来自选定地图标记的信息的模式。我通过保存所选标记的状态并将其传递给模态中的组件来显示来自该特定标记的信息来做到这一点。结果，标记没有聚焦，地图会快速回到它的起始位置（在许多情况下，是用户的位置）。

有没有办法保持焦点或以某种方式加载模式，不会将地图重置为默认位置？

这是一个片段：

<View style={styles.mapView}>
        <MapView
          style={styles.mapView}
          showsUserLocation={true}
          showsMyLocationButton={true}
          region={{
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: latitudeDelta,
            longitudeDelta: longitudeDelta,
          }}>
          {
            (markerArr = data.map((listing, index) => (
              <CustomMarker
                key={index}
                image={listing.pin}
                point={listing.point}
                category={listing.categoryID}
                place={listing.place}
                onPress={() => {
                  markerPressed(listing);
                }}
                coordinate={{
                  latitude: listing.latitude,
                  longitude: listing.longitude,
                }}
              />
            )))
          }
        </MapView>
        <Modal
          style={{ position: 'absolute', bottom: 10 }}
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            setModalVisible(!modalVisible);
          }}
          setModalVisiblity={() => {
            setModalVisible((preState) => (preState = !preState));
          }}>
          <TouchableOpacity
            style={styles.containerT}
            activeOpacity={1}
            onPressOut={() => {
              setModalVisible(false);
            }}>
            <ScrollView
              directionalLockEnabled={true}
              contentContainerStyle={{ position: 'absolute', bottom: 35 }}>
              <TouchableWithoutFeedback>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      onPressListingItem(selectedMarker);
                      setModalVisible(false);
                    }}>
                    <MapListing
                      // key={index}
                      name={selectedMarker.title}
                      image={selectedMarker.pin}
                      point={selectedMarker.point}
                      photo={selectedMarker.photo}
                      category={selectedMarker.categoryID}
                      description={selectedMarker.description}
                      place={selectedMarker.place}
                      link={() => {
                        markerLink(selectedMarker);
                      }}
                    />
                  </TouchableOpacity>
                </View>
              </TouchableWithoutFeedback>
            </ScrollView>
          </TouchableOpacity>
        </Modal>
      </View>