Реагировать Родной | Как визуализировать маркеры после нажатия кнопки (onPress ()) - PullRequest
Новая
       7

Реагировать Родной | Как визуализировать маркеры после нажатия кнопки (onPress ())

0 голосов
/ 24 апреля 2019

Я хочу создать приложение, похожее на Uber.Дело в том, что в документации реагировать на родные карты указано только, как визуализировать напрямую

. В моем случае я хочу, чтобы <Marker/> отображался после onPress () (нажал кнопку). Как этого добиться?

Я попытался изменить состояние, используемое компонентом <Marker/> внутри <MapView>, но похоже, что он не перерисован

Конструктор: 

constructor(props) {
        super(props)
        this.state = {
            updatesEnabled: false,
            location: {},
            modalCategoryVisible: false,
            markers: []
        }
    }

дескриптор onPress: 

_searchStreetVendors = () => {
        this.setState({
            markers: [
                {
                    merchant_name: "Zaky",
                    merchant_type: "Sate",
                    merchant_info: "Selling Sate that is tasty",
                    merchant_phone: "0812909281234",
                    location: {
                        latitude: -6.667772,
                        longitude: 106.723630,
                    }
                },
            ]
        })
    }

MapView: 

render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.map(marker => (
                        <MapViewMarker
                            coordinate={marker.location}
                            title={marker.title}
                            description={marker.description}
                        />
                    ))}
                </MapView>
                ...
             <View/>
}

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Два небольших изменения в вашем коде и это маркер рендеринга для меня 

_searchStreetVendors = () => {
    this.setState({
        markers: [
            {
                merchant_name: "Zaky",
                merchant_type: "Sate",
                merchant_info: "Selling Sate that is tasty",
                merchant_phone: "0812909281234",
                key: 1,
                location: {
                    latitude: -6.174969,
                    longitude: 106.827202,
                }
            },
        ]
    })
}

<MapView
    style={styles.map}
    provider={PROVIDER_GOOGLE}
    ref={(mapView) => { _mapView = mapView; }}
    initialRegion={{
        latitude: -6.174969,
        longitude: 106.827202,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}>
    {this.state.markers.map(marker => (
        <MapView.Marker
            coordinate={marker.location}
            title={marker.title}
            description={marker.description}
            key={marker.key}
        />
    ))}
</MapView>

1) Добавлен ключ, который нужен при рендеринге множественного маркера на экране, который отображался как предупреждение

2) MapView.Maker , я обнаружил, что между текстом, который выдавал мне ошибку, не было точки

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

0 голосов
/ 24 апреля 2019

Можете ли вы попробовать следующее?

И измените параметры в функциях карты, вы используете ключи, которых нет в словаре местоположения. (Marker.title и marker.description нет в словаре) 

renderMarkers() {
    return this.state.markers.map((marker) => {
      return (
        <MapViewMarker
            coordinate={marker.location}
            title={marker.merchant_name}
            description={marker. merchant_info}
        />
      )
    })
}

render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.length > 0 ? this.renderMarkers() : null}
                </MapView>
                ...
             <View/>
}
...