使用新坐标更新本机图

Question

我的应用程序内部有一个react-native-map，我使用它来显示灯具信息，并在地图顶部覆盖一个平面列表滚动视图；

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import MapView, { Marker } from "react-native-maps";
import {Dimensions } from "react-native";
import styles from './team.styles.js';

const dimensions = Dimensions.get('window');
const Fixtures = (props) => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);


  function chkValue(val) {
    return state.region.longitude = val;
  }

  state = { 
    region: {
     latitude: 52.93877,
     longitude: -1.201258,
     latitudeDelta: 0.015,
     longitudeDelta: 0.0121,
  }
 }

useEffect(() => {
  fetch('https://s3.eu-west-2.amazonaws.com/schimperdigital.com/assets/derbyfutsalclub/fixtureinfo.json')
    .then((response) => response.json())
    .then((json) => {
      setData(json)
      })
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

return (
  <View style={stylesB.container} >
       <MapView
        style={stylesB.map}
        initialRegion={this.state.region}
        >
      <Marker 
        coordinate={{ latitude: 52.93877, longitude:-1.201258 }} 
        image={require("./derbymarker.png")}
      />
      </MapView>
    <View style={stylesB.containerlower}>
      <View>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
          <TouchableOpacity onPress={() => chkValue('53.448527')}>
            <View style={styles.containerfixturedetails}>
              <View style={styles.factscontainer}>
                <View style={styles.factscontainerupper}>
                  <Text style={styles.kickofftime}>KO{"\n"}{item.KOTime}</Text>
                  <Text style={styles.playerprofilename}>vs {item.Opposition}</Text>
                </View>
                <View style={styles.fixturecontainerlower}>
                  <Text style={styles.fixturestats}>TEAM: {item.Team}</Text>
                  <Text style={styles.fixturestats}>ADDRESS: {item.LocationAddress}</Text>
                  <Text style={styles.fixturestats}>ADMISSION: {item.Admission}</Text>
                </View>
              </View>
              <View style={styles.playerprofileimgcontainer}>

              </View>
            </View>
          </TouchableOpacity>
          )}
        />
      )}
      </View>
    </View>
  </View>
)
};

const stylesB = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: dimensions.height,
    width: dimensions.width, 
    flexDirection: "column",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
  },
  containerlower: {
    height:300,
    flex: 1,
    position: 'absolute',
    bottom:20,
  },
 });

export default Fixtures;

地图加载后，平面列表拉回了json文件。我正在努力的地方是处理TouchableOpacity onPress。我尝试了几种方法来解决此问题，但似乎没有任何效果：（。

[我想要做的是，当用户单击或滚动平面列表项目时，该平面列表项目将其经度和纬度数据（这是在平面列表中返回的JSON中）传递给地图，并且地图更新为新坐标。