Question

我正在使用react-native-map包使用我在API调用中收到的坐标绘制折线。在博览会上启用HOT重装时画线，但在启用LIVE重装时不画线。

我已将所有坐标转换为以下模板中的对象数组。 [{latitude：33.00，经度：-74.00}，{latitude：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重新加载时已经显示的折线，我不知道这是预期的行为还是某些错误。

Answer 1

我将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作为条件渲染的标志，它按预期工作。

启用实时重新加载后，折线未在地图上呈现

1 个答案: