App.js

// MapComponent.js
import React, { useRef, useEffect } from 'react';
import { requireNativeComponent, UIManager, findNodeHandle, Button, View, StyleSheet, NativeEventEmitter, NativeModules, Alert } from 'react-native';
import EventEmitterModule from './EventEmitterModule';

const RNMapView = requireNativeComponent('RNMapView');
// const eventEmitter = new NativeEventEmitter();

const MapComponent = () => {
  const mapRef = useRef(null);

  useEffect(() => {
    console.log('MapComponent useEffect');
    const eventListener = EventEmitterModule.addListener('MyCustomEvent', (event) => {
      console.log('地图被点击了', event.imageId);
      Alert.alert(
        '图片点击',
        `您点击了图片 ${event.imageId}`,
        [
          {
            text: '移动',
            onPress: () => {
              updateImageLocation(event.imageId, 100, 100);
            },
            style: 'destructive'
          },
          {
            text: '删除',
            onPress: () => {
              removeImageOnMap(event.imageId);
            },
            style: 'cancel'
          },
          {
            text: '关闭',
            style: 'cancel'
          }
        ]
      );
    });
    
    return () => {
      eventListener.remove();
    };
  }, []);

  const appendPoint = (longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.appendPoint,
      [longitude, latitude]
    );
  };

  const clearMap = () => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.clearMap,
      []
    );
  };

  const setColor = (r,g,b) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.setColor,
      [r,g,b]
    );
  }

  const addImageOnMap = (url, id, longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.addImageOnMap,
      [url, id, longitude, latitude]
    );
  }

  const updateImageLocation = (id, longitude, latitude) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.updateImageLocation,
      [id, longitude, latitude]
    );
  }

  const removeImageOnMap = (id) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.removeImageOnMap,
      [id]
    );
  }

  const setImageDiameter = (diameter) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(mapRef.current),
      UIManager.RNMapView.Commands.setImageDiameter,
      [diameter]
    );
  }

  return (
    <View style={styles.container}>
      <RNMapView 
        ref={mapRef}
        style={styles.map} 
      />
      <View style={styles.buttonContainer}>
        <Button
          title="添加北京点"
          onPress={
            () => {
              appendPoint(116.4074, 39.9042)
              addImageOnMap("https://cdn.luogu.com.cn/upload/image_hosting/evb3j8e2.png", "1001", 116.4074, 39.9042)
              setImageDiameter(100);
            }
          }
        />
        <Button
          title="添加上海点"
          onPress={() => {
            appendPoint(101.4737, 31.2304)
            addImageOnMap("https://cdn.luogu.com.cn/upload/image_hosting/evb3j8e2.png", "1002", 101.4737, 31.2304)
          }}
        />
        <Button
          title="添加广州点"
          onPress={() => {
              appendPoint(113.2644, 23.1291)
              addImageOnMap("https://cdn.luogu.com.cn/upload/image_hosting/evb3j8e2.png", "1003", 113.2644, 23.1291)
            }
          }
        />
        <Button
          title="设置蓝色"
          onPress={() => setColor(0, 0, 255)}
        />
        <Button
          title="设置红色"
          onPress={() => setColor(255, 0, 0)}
        />
        <Button
          title="设置绿色"
          onPress={() => setColor(0, 255, 0)}
        />
        <Button
          title="清除地图"
          onPress={clearMap}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  buttonContainer: {
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    padding: 10,
  }
});

export default MapComponent;