将不同图像添加到标记的功能 - React-native MapView答案

【问题标题】：A function that adds different images to marker – React-native MapView将不同图像添加到标记的功能 - React-native MapView
【发布时间】：2021-03-21 02:59:48
【问题描述】：

通过使用这篇文章https://medium.com/@clarkjohnson_85334/adding-fetched-markers-to-my-react-native-maps-app-5f068c7be14d，我设法将观察结果整合到我的 MapView 中。

 mapMarkers = () => {
    return this.state.items.map((item) => <Marker
        key={item.id}
        coordinate={{ latitude: item.geoLocation.latitude, longitude: item.geoLocation.longitude }}
        title={item.acceptedVernacularName}
        description={item.scientificName}
    >
    </Marker >)
}

但是，我还没有设法根据鸟类的类型将不同的图像添加到标记中。是否有可能制作一个可以与需要字符串的 Marker image={} 道具一起使用的函数？我的想法是应该使用 require('../assets/xx') 将图像设置为本地，但基于 id 或鸟的名称 (acceptedVernacularName)。

JSON file

【问题讨论】：

标签： javascript json react-native sorting

【解决方案1】：

创建一个这样的函数来根据您的类型获取自定义图标

getIconFromType(type) {
        var icon = require("../image_path/");
        switch (type) {
            case "A": icon = require("../image_path/image_a.png");
                break
            case "B": icon = require("../image_path/image_b.png");
                break
            default: icon = require("../image_path/image_b.png");
                break
        }
        return icon
 }

然后使用这种方式根据您的 id 在标记中应用自定义图标

<Marker  ...other props>
 <Image source={this.getIconFromType(item.type)} resizeMode={'contain'} style={{ height: 30, width: 30 }} />
</Marker>

【讨论】：

如果它解决了您的问题，请标记为正确。@Goldcastle
非常感谢！ :D