反应原生地图mapPadding不起作用

Question

我正在使用

fitToSuppliedMarkers()

作为我的标记，并且需要向我的地图添加一些填充。我尝试实施这个解决方案，但没有成功。我无法使用

fitToCoordinates()

，因为我需要在

componentDidMount

中创建该方法不支持的标记。

我的代码：

<MapView onMapReady={() => this.mapRef.map.setNativeProps({ padding: 100 })}></MapView>

此代码产生“setNativeProps 不是函数”。 我还尝试使用

docs

中存在的 mapPadding 属性，但没有成功：

<MapView mapPadding={{top: 20, right: 20, bottom: 20, left: 20}}></MapView>

Answer 1

我相信react-native-maps的android实现存在问题。我不确定，但这似乎是 px 到 dp 转换的问题。试试这个：

const padding = Platform.OS === 'android' 
                   ? PixelRatio.getPixelSizeForLayoutSize(20) 
                   : 20;

const mapPadding = {top: padding, right: padding, bottom: padding, left: padding};

如果不起作用，请尝试将 padding 设置为 200，看看是否有任何差异。

编辑： 这是我成功使用的确切代码：

const iosEdgePadding = { top: 100, right: 50, bottom: 300, left: 50 };

const androidEdgePadding = {
    top: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.top),
    right: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.right),
    bottom: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.bottom),
    left: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.left),
}

const edgePadding = (Platform.OS === 'android') ? androidEdgePadding : iosEdgePadding;

this.refs.map.fitToCoordinates([coordinate1, coordinate2], { edgePadding, animated: true })

Answer 2

mapPadding={{ 顶部：100，右侧：100，底部：100，左侧：100 }}

Answer 3

我知道这很奇怪，我不知道它为什么有效，但这对我在 Android 上完美地起作用。没有 Platform.select 它不起作用。希望这对任何人都有帮助！

const iosEdgePadding = {
    bottom: height / bottomPadding,
    left: width / 5,
    right: width / 5,
    top: 100,
  };

  const edgePadding = Platform.select({
    ios: iosEdgePadding,
    android: iosEdgePadding,
  });

  mapView.fitToCoordinates(radiusBoundaries, {
    edgePadding,
    animated: true,
  });