React 本机 MapView 室内级别选择器在 iOS 但不在 Android 上工作

Question

当使用 mapView（react-native-map 库的一部分）时，室内水平选择器切换在 ios 设备上工作，当放大某些建筑物时，但在 android 设备。

   <MapView
  style={styles.mapStyle}
  provider="google"
  showsUserLocation={true}
  region={props.region}
  zoomEnabled={true}
  showsIndoorLevelPicker={true}
  showsIndoors={true}
  showsMyLocationButton={true}
/>

如何让它工作？

Answer 1

我发现通过在短暂延迟后调整 MapView 组件的大小，我可以让室内地板选择器显示在 Android 上。这是一个带有功能组件的示例。

同样的原则也适用于 class 组件，但您可以改用 setState()。

import React, { useState, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';


import MapView, {
  Polygon,
  Polyline,
  LatLng,
} from 'react-native-maps';


export const Overlays = () => {

  const [currentMargin, setCurrentMargin] = useState(1);

  useEffect(() => {
    setTimeout(() => {
      setCurrentMargin(0);
    }, 1000);
  }, []);


  return (
    <View style={styles.container}>
      <MapView
        style={{ marginBottom: currentMargin, ...StyleSheet.absoluteFillObject }}
        showsIndoorLevelPicker={true}
        showsMyLocationButton={true}
        provider={"google"}
        initialRegion={{
          latitude: 45.497284367030844,
          latitudeDelta: 0.0015644580909750516,
          longitude: -73.5790109820664,
          longitudeDelta: 0.0024069473147392273,
        }}
      >
      </MapView>
    </View >
  );

}


const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  }
});

export default Overlays;

结果出来了！ Screenshot

希望对您有所帮助。

React 本机 MapView 室内级别选择器在 iOS 但不在 Android 上工作

React native MapView indoor level picker working on iOS but not Android

android

react-native

react-native-maps