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

【问题标题】：Polyline is not rendering on maps while live reload is enabled启用实时重新加载时，折线未在地图上呈现
【发布时间】：2019-07-09 05:18:57
【问题描述】：

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

我已将所有坐标转换为以下模板中的对象数组。 [{纬度：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 重新加载时显示，我不明白这是预期的行为还是这是一些错误。

【问题讨论】：

标签： react-native expo react-native-maps

【解决方案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 作为条件渲染的标志，它按预期工作。

【讨论】：