时间戳

首页 > 解决方案 > React Native 图像映射器（如何在图像上制作可触摸区域）

react-native - React Native 图像映射器（如何在图像上制作可触摸区域）

问题描述

如何在图像上制作可触摸区域[点击位置1显示效果，在另一个位置2、3、4、5显示相同效果和不同效果。]

实际上，当我单击图像上的特定位置时，得到相应的 x 和 y 坐标但没有得到图像上的可触摸区域

标签： react-native

解决方案

请按照这个

我们必须创建一个与此类似的映射对象

    const MAPPING = [
  {
    id: '0',
    name: 'First Area Name',
    shape: 'rectangle',
    width: 30,
    height: 40,
    x1: 80,
    y1: 500,
    prefill: 'red',
    fill: 'blue'
  },
  {
    id: '1',
    name: 'Second Area Name',
    shape: 'rectangle',
    x2: 155,
    y2: 540,
    x1: 125,
    y1: 500
  },
]

ImageMapper 的使用

 <ImageMapper
        imgHeight={500}
        imgWidth={250}
        imgSource={imageSource}
        imgMap={MAPPING}
        onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
        containerStyle={styles.myCustomStyle}
        selectedAreaId="my_area_id"
      />

它根据我们传递的映射提供接触点。请通过此文档了解更多信息。 图书馆

推荐阅读