React Native Maps如何通过调用文件名设置自定义标记，替换路径静态值

解决方案 #

方案1：预设图片映射表（原生React Native项目推荐写法） #

React Native 中的 require 是打包阶段静态解析的，不支持直接传入运行时的变量拼接路径，你需要先把所有可能的pin值对应的图片提前引入建立映射，再通过listing.pin匹配对应资源：

// 提前定义所有pin值对应的图片映射，把所有可能用到的pin值都列在此处
const pinImageMap = {
  GREEN: require('../../../assets/pins/PINGREEN.png'),
  RED: require('../../../assets/pins/PINRED.png'),
  YELLOW: require('../../../assets/pins/PINYELLOW.png'),
}

const markerArr = data.map((listing, index) => (
    <Marker
      key={index}
      title={listing.title}
      image={pinImageMap[listing.pin]} // 直接通过pin值获取对应图片
      // description={listing.description}
      onCalloutPress={() => {
        onPressListingItem(listing);
      }}
      coordinate={{
        latitude: listing.latitude,
        longitude: listing.longitude,
      }}
    />
  ));

方案2：动态路径拼接（仅兼容web端React/特殊配置的React Native项目） #

如果你的项目是web端React项目、或者做了支持动态资源加载的特殊配置，可以直接替换字符串拼接即可：

image={require('../../../assets/pins/PIN' + listing.pin + '.png')}

注意：原生未做特殊配置的React Native项目使用该写法会在打包阶段报错找不到资源，不推荐使用。

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