使用 React Native 在地图上可视化您的照片

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Image } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
 
const PhotoMap = ({ photo }) => {
  const [region, setRegion] = useState({
    latitude: photo.latitude,
    longitude: photo.longitude,
    latitudeDelta: 0.004,
    longitudeDelta: 0.003,
  });
 
  useEffect(() => {
    // 当照片信息发生变化时，更新地图的中心坐标
    setRegion({
      ...region,
      latitude: photo.latitude,
      longitude: photo.longitude,
    });
  }, [photo]);
 
  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        <Marker coordinate={{ latitude: photo.latitude, longitude: photo.longitude }}>
          <Image style={styles.marker} source={{ uri: photo.thumbnail }} />
        </Marker>
      </MapView>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  marker: {
    width: 50,
    height: 50,
  },
});
 
export default PhotoMap;

这段代码展示了如何在React Native应用中使用react-native-maps库来显示一个地图，并在地图上放置一个图片标记，图片标记的位置由传入的photo对象的latitude和longitude属性确定。当photo对象发生变化时，使用useEffect和useState钩子来更新地图的中心坐标和标记位置。