使用新坐标更新 react-native-map答案

【问题标题】：Updating a react-native-map with new coordinates使用新坐标更新 react-native-map
【发布时间】：2020-06-13 16:16:44
【问题描述】：

我的应用程序中有一个 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 中）传递到地图中，并且地图更新为新坐标。

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

首先，如果使用函数式组件，则不能像使用类组件一样以常规方式声明状态。您也不能像声明 initialRegion 那样声明“this”。
从我在您的 sn-p 中可以看到，您使用传统状态处理的钩子令人信服。您必须决定其中一个选项，而不是两个选项。
为了更新地图上的新坐标，您需要进行状态更改。

【讨论】：