Блог

С использованием этой статьи 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 >)
}
 

Однако мне не удалось создать функцию, которая добавляет разные изображения к маркерам в зависимости от типа птицы. Возможно ли вообще создать функцию, которая может работать с маркером image={} prop, который запрашивает строку? Моя идея заключается в том, что изображение должно быть установлено локально с помощью require(‘../assets/xx’), но на основе либо идентификатора, либо имени птицы (acceptedVernacularName).

Файл JSON

Создайте подобную функцию, чтобы получить пользовательский значок в зависимости от вашего типа

 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
 }
 

затем используйте этот способ, чтобы применить пользовательский значок в маркере на основе вашего идентификатора

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