javascript - react native - react-native-maps 在 iOS 上性能缓慢

Question

这是我第一次使用 react-native-maps 在 iOS 上集成 Google map 。我可以按照以下链接中的步骤在 iOS 上显示 Google map :

react-native-maps with Google Map on iOS

然后，新的问题出现了， map 的性能很糟糕(我不能移动 map )。

更新

这是我的代码:

区域将保存在状态中:

constructor(props) {
    super(props);

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

这是显示 map 的代码:

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 上移动 map

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

Answer 1

因此，我不喜欢代码中的一些事情，我认为这些事情可能会困扰您:

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

所以，我会试试这个:

• 删除 console.log 或确保没有在里面记录很多X代码。
• 用 map 中的 initialRegion 替换 region。无需保留更新它。如果需要，只需将其保存在另一个变量中。
• 删除 provider 属性以查看常规 iOS 是否正常MapKit 有效。

此外，请记住 MapView 有一些 Prop 可以实际禁用滚动，但我假设您已经尝试过了。