React Native Maps 标记的缓慢渲染

Question

所以我遇到了react-native-maps 在release 配置中在设备或模拟器上运行时出现的问题。在debug（设备和模拟器）上，地图效果很好；它反应灵敏，控制良好等。在release 上，它似乎无法处理渲染多个<MapView.Marker/> 组件（当我说多个时，我的意思不是数百或数千，我的意思是

以下是代码示例：

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>
    );
}

这是动作流程：

1. 组件安装，渲染 <MapView> 和单个 <MapView.Marker/> 用于 this.state.currentPosition（在早期组件中检索）
2. 调用handleOrders()，更新this.state.orders 和this.state.coordinateArray。
3. 额外的<MapView.Marker/> 组件被渲染。
4. 调用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 在<MapView> 上设置为ref )。

由于某种原因，在release 配置中，这段代码在调用this.setMapToCoordinates() 时会导致速度大幅下降，这发生在API 调用获取orders 以及其他操作之后。

所以虽然我无法回答这个问题的“为什么”，但我可以回答“如何”，如果其他人遇到类似的事情，也许这可以帮助他们。