Полилиния не рендерится на картах, пока активна перезагрузка - PullRequest
Новая
       39

Полилиния не рендерится на картах, пока активна перезагрузка

0 голосов
/ 09 июля 2019

Я использую пакетact-native-map для рисования ломаной линии, используя координаты, которые я получаю при вызове API.Линия рисуется, когда горячая перезагрузка включена на выставке, но не когда живая перезагрузка включена.

Я преобразовал все координаты в массив объектов в следующем шаблоне.[{широта: 33.00, долгота: -74.00}, {широта: 33.10, долгота: -74.02}] И передал этот массив в координаты в MapView.Polyline.

Вот как я рендеринг MapView 

<MapView
                    showsUserLocation
                    followsUserLocation
                    style={{ flex: 1 }}
                    initialRegion={{
                        latitude: 31.5623499,
                        longitude: 74.3287183,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}>

                    {this.state.allPlants.map((item, index) => {
                    return <MapView.Marker
                    key={item.id.toString()}
                    coordinate={{
                    latitude: item.latitude,
                    longitude: item.longitude,
                    }}>
                    <Image source={item.isDead?require("../../assets/dead_tree.png"):require("../../assets/tree.png")} key={item.id.toString()} />                  </MapView.Marker>
                    })}

                    <MapView.Polyline
                        coordinates={this.allCoords}
                        strokeWidth={6}
                        strokeColor="red"
                        fillColor="rgba(100,0,0,0.5)"
                        />
                </MapView>

И вот как я создаю массив объектов координат 

        let tmpArray=[]
        if(tmp.length!==0){
            for(let i=0; i<tmp.length;i++){
                let tmpObj={
                    latitude:tmp[i].latitude,
                    longitude:tmp[i].longitude
                }
                tmpArray.push( tmpObj)
            }
        }
        this.allCoords=tmpArray

Он должен быть в состоянии показать полилинию, как это уже показывает при перезагрузке HOT, я не понимаю, если этоожидаемое поведение или это какая-то ошибка.

1 Ответ

0 голосов
/ 10 июля 2019

Я обернул код MapView в следующий 

<View style={{ flex: 1 }}>
 {this.state.isDataFetched && (
 <MapView
                    showsUserLocation
                    followsUserLocation
                    style={{ flex: 1 }}
                    initialRegion={{
                        latitude: 31.5623499,
                        longitude: 74.3287183,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}>

                    {this.state.allPlants.map((item, index) => {
                    return <MapView.Marker
                    key={item.id.toString()}
                    coordinate={{
                    latitude: item.latitude,
                    longitude: item.longitude,
                    }}>
                    <Image source={item.isDead?require("../../assets/dead_tree.png"):require("../../assets/tree.png")} key={item.id.toString()} />                  </MapView.Marker>
                    })}

                    <MapView.Polyline
                        coordinates={this.allCoords}
                        strokeWidth={6}
                        strokeColor="red"
                        fillColor="rgba(100,0,0,0.5)"
                        />
                </MapView>
)}
</View>

И использовал this.state.isDataFetched в качестве флага для условия рендеринга, и он работал как ожидалось.

...