React Native中如何实现带区域点击事件的图片地图？

完全可以实现这类需求，下面是两种实用的实现方案：

方案一：手动用绝对定位叠加可点击组件 #

适合规则形状的区域，操作简单直接：

• 先准备好地图图片，用图片编辑工具（比如Figma、PS）测量出每个可点击区域的左上角坐标、宽度、高度。
• 在Image组件上层，用Pressable或TouchableOpacity通过绝对定位覆盖对应区域，绑定跳转逻辑。

示例代码：

import React from 'react';
import { View, Image, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const MapScreen = () => {
  const navigation = useNavigation();

  // 根据你的实际图片调整区域数据
  const clickableAreas = [
    { id: 'north', top: 40, left: 60, width: 110, height: 90, targetScreen: 'NorthRegion' },
    { id: 'south', top: 160, left: 55, width: 120, height: 100, targetScreen: 'SouthRegion' },
  ];

  const navigateToRegion = (screenName) => {
    navigation.navigate(screenName);
  };

  return (
    <View style={{ flex: 1 }}>
      <Image
        source={require('./assets/your-map.png')}
        style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
      />
      {clickableAreas.map(area => (
        <Pressable
          key={area.id}
          style={{
            position: 'absolute',
            top: area.top,
            left: area.left,
            width: area.width,
            height: area.height,
            // 调试时可开启半透明背景，确认区域位置
            // backgroundColor: 'rgba(0,255,0,0.2)'
          }}
          onPress={() => navigateToRegion(area.targetScreen)}
        />
      ))}
    </View>
  );
};

export default MapScreen;

方案二：使用第三方库处理不规则区域 #

如果你的区域是不规则形状（比如示例图中的彩色区域），推荐用react-native-image-mapper，它支持根据坐标点定义多边形可点击区域：

1. 安装库：

npm install react-native-image-mapper --save

2. 用图片工具获取每个不规则区域的顶点坐标集合，然后配置区域数据，绑定点击事件。

示例代码：

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import ImageMapper from 'react-native-image-mapper';

const MapScreen = () => {
  const navigation = useNavigation();

  // 每个区域的顶点坐标，根据实际图片调整
  const polygonAreas = [
    {
      id: 'areaA',
      shape: 'polygon',
      coordinates: [{x: 30, y: 40}, {x: 140, y: 35}, {x: 95, y: 120}],
      targetScreen: 'AreaAScreen'
    },
    {
      id: 'areaB',
      shape: 'polygon',
      coordinates: [{x: 150, y: 150}, {x: 240, y: 145}, {x: 195, y: 220}, {x: 160, y: 215}],
      targetScreen: 'AreaBScreen'
    }
  ];

  const handleAreaClick = (area) => {
    navigation.navigate(area.targetScreen);
  };

  return (
    <ImageMapper
      imgSource={require('./assets/your-map.png')}
      imgWidth={320} // 图片的实际宽度
      imgHeight={480} // 图片的实际高度
      areas={polygonAreas}
      onPress={(area) => handleAreaClick(area)}
      // 可选：设置点击时的区域高亮样式
      areaStyle={{ active: { fill: 'rgba(255,0,0,0.3)' } }}
    />
  );
};

export default MapScreen;

注意事项 #

• 坐标数据必须匹配图片的实际尺寸，如果图片是自适应屏幕的，需要根据屏幕缩放比例动态调整坐标值。
• 调试阶段可以给可点击区域添加半透明背景，快速验证区域位置是否准确。

内容的提问来源于stack exchange，提问作者Veronica