react native - react-native-maps 在 iOS 上的性能很慢

Question

这是我第一次使用 react-native-maps 在 iOS 上集成 Google 地图。我可以在这个链接中一步一步地在 iOS 上显示谷歌地图：

react-native-maps with Google Map on iOS

然后，出现了新的问题，地图的性能很糟糕（我无法移动地图）。

更新

这是我的代码：

区域将保存在状态：

constructor(props) {
    super(props);

    this.state = {
        region: {
            latitude: 10.762622,
            longitude: 106.660172,
            latitudeDelta: 0.0100,
            longitudeDelta: 0.0100,
        },
    }
}

这是显示地图的代码：

render() {
    return (
        <View style={styles.container}>
            <View
                style={styles.mapContainer}>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.map}
                    region={this.state.region}
                    showsUserLocation={true}
                    onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
                >
                </MapView>
            </View>
        </View>
    )
}

onRegionChangeComplete(region) {
    console.log("region", region);
    this.setState({region: region});
}

这些代码在 Android 上运行良好，但我无法在 iOS 上移动地图

如果您有解决此问题的任何想法，请告诉我。提前谢谢！

Answer 1

所以，我不喜欢我认为可能会打扰您的代码：

1. 在 iOS 中使用 Google Provider：是否已安装？工作正常吗？我通常使用默认的 iOS 地图，因为我猜它更优化。
2. 您在 onRegionChange 中使用了 console.log()，它可以被执行很多次。我在 Debug 中遇到了一些 iOS 性能问题，因为我在渲染方法中使用了很多 console.log()，这会降低模拟器的速度。
3. 似乎该区域指向该州的一个区域，并且您在移动时再次更新该区域。

所以，我会试试这个：

• 删除console.log或确保里面没有记录很多 代码。
• 在地图中替换初始区域的区域。无需保留 更新它。如果需要，只需将其保存在另一个变量中。
• 去掉provider prop，看看是不是普通的iOS MapKit 有效。

另外，请记住 MapView 有一些真正禁用滚动的道具，但我假设您已经尝试过。