React Native Map如何通过条件判断渲染自定义标记图标？

你可以通过类型-图标映射表来统一处理不同类型的Marker，既避免重复代码，也方便后续扩展新类型。具体实现如下：

步骤1：定义类型与图标的映射关系 #

先提前创建一个映射对象，把每个type对应的图标资源关联起来（React Native要求require的资源路径是静态的，不能动态拼接，所以必须提前定义好）：

// 定义类型-图标映射表
const MARKER_ICONS = {
  type1: require("../statics/icons/type1.png"),
  type2: require("../statics/icons/type2.png"),
  // 后续新增类型直接在这里添加即可
};

步骤2：统一渲染所有Marker #

修改你的MapMarkers方法，直接遍历所有标记，根据type从映射表中获取对应图标：

MapMarkers = () => {
  return this.state.MyMarkers.map((report) => {
    // 获取当前类型对应的图标，没有匹配的话可以设置一个默认图标
    const markerIcon = MARKER_ICONS[report.type] || require("../statics/icons/default.png");
    
    return (
      <Marker
        key={report.id}
        coordinate={{ latitude: report.latitude, longitude: report.longitude }}
        title={report.name}
        description={report.info}
        icon={markerIcon}
      >
        <Image
          source={markerIcon}
          style={{ width: 20, height: 20 }}
        />
      </Marker>
    );
  });
};

步骤3：在render中调用统一方法 #

最后在渲染MapView的时候，只需要调用这个统一的方法即可：

render() {
  return (
    <SafeAreaView>
      <View>
        <MapView
          // 你的MapView配置
        >
          {this.MapMarkers()}
        </MapView>
      </View>
    </SafeAreaView>
  );
}

关键说明 #

• 映射表的方式比一堆if-else或者三元运算符更简洁，尤其是当类型数量增多时，维护成本更低。
• 必须提前用require加载所有需要的图标，不能在map循环里动态拼接路径（比如require(../statics/icons/${report.type}.png)），因为React Native的打包工具需要在编译时确定所有静态资源的位置。
• 如果存在未定义的type，可以设置一个默认图标，避免出现资源找不到的问题。

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