Question

所以我在react-native-maps配置中在设备或模拟器上运行时遇到release chugging问题。在debug（设备和模拟器）上，地图效果很好;它具有响应性，控制性等等。在release上，它似乎无法处理多个<MapView.Marker/>组件（当我说多个时，我不是指数百或数千，我的意思是＆lt; 20）。

以下是代码示例：

constructor(props) {
    super(props);
    this.state = {
        currentPosition: global.currentPosition,
        orders: [],
        coordinateArray: []
    };
}

componentDidMount() {
    this.handleOrders().then(() => {
        this.setMapToCoordinates();
    });
}

async handleOrders() {
    let result = await data.fetchData("...");
    if (result) {
        let orders = [];
        let coordinateArray = [];

        result.data_list.forEach(orderObject => {
            let order = {
                coordinates: orderParser.constructCoordinates(orderObject),
            };
            coordinateArray.push(order.coordinates);
            orders.push(order);
        });

        this.setState({
            orders: orders,
            coordinateArray: coordinateArray
        });
    }
}

setMapToCoordinates(){
    if (this.mapView) {
        let coordinateArray = this.state.coordinateArray;
        if (this.state.currentPosition) {
            coordinateArray = coordinateArray.concat(this.state.currentPosition.coordinates);
        }
        this.mapView.fitToCoordinates(coordinateArray, {
            edgePadding: {
                top: 200,
                right: 100,
                bottom: 100,
                left: 100
            },
            animated: animated
        });
    }
}

因此，此代码中发生的情况是，当组件安装时，它会执行API调用以获取包含orders的一堆coordinates以及其他信息。除了将其推送到orders之外，它还将坐标推送到coordinateArray，setMapToCoordinates()用于限制地图边界。

接下来，这是该组件的render函数：

render() {
    return (
        <MapView mapType="satellite" ref={ref => { if (!this.mapView) { this.mapView = ref; }}}>
            {this.state.orders.map(order => {
                return <MapView.Marker key={order.id} coordinate={order.coordinates} image={require("...")} />;
            })}
            {this.state.currentPosition ? <MapView.Marker key={"currentPosition"} coordinate={this.state.currentPosition.coordinates} image={require("../images/pin.png")} centerOffset={{ x: 0, y: -25 }} /> : null}
        </MapView>
    );
}

这就是行动的流程：

组件装入，为<MapView>呈现<MapView.Marker/>和单个this.state.currentPosition（在早期组件中检索）
handleOrders()被调用，更新this.state.orders和this.state.coordinateArray。
呈现其他<MapView.Marker/>个组件。
setMapToCoordinates()，移动地图以使this.state.currentPosition和this.state.coordinateArray适合视图。

在debug上，此工作流程中没有问题，但在release上，步骤2的成功与步骤3的完成之间有约40秒的延迟。成功渲染后在这些~16个标记中，一切都正常工作，但在加载时间内，应用程序完全没有响应。此外，由于涉及导航，因此在单个会话中多次调用此流程。

如果有人知道这个问题的原因和/或如何解决它，那就太好了。我在release方案中调试时非常困难，因此禁用了日志记录。

供进一步参考：

react-native-maps: ^0.17.1
react-native: 0.49.3
release计划
iPhone 6,7和7+测试

Answer 1

因此，我上面的代码中没有显示一个简单的日志声明

setMapToCoordinates(){
    console.log("Called!", this.mapView);
    ...
}

我用它来测试this.mapView在几种不同情况下的情况，在debug配置中，它记录了"Called!", ...没有问题（this.mapView设置为ref上的<MapView>。

出于某种原因，在release配置中，这段代码会在调用this.setMapToCoordinates()时导致大幅减速，这会在API调用{fn orders之后发生，以及其他操作。< / p>

所以虽然我无法回答＆＃34;为什么＆＃34;对于这个问题，我可以回答＆＃34;如何＆＃34;，如果其他人遇到类似的东西，也许这可以帮助他们。

React Native Maps缓慢渲染标记

1 个答案: