时间戳

首页 > 解决方案 > React 本机 MapView 室内关卡选择器适用于 iOS 但不适用于 Android

android - React 本机 MapView 室内关卡选择器适用于 iOS 但不适用于 Android

问题描述

当使用 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}
/>

我如何让它工作？

标签： androidreact-nativereact-native-maps

解决方案

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

同样的原则也适用于类组件，但您将使用 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;

这是结果！ 截屏

希望这可以帮助。

推荐阅读