反应本机地图mapPadding不起作用答案

【问题标题】：React native maps mapPadding not working反应本机地图mapPadding不起作用
【发布时间】：2018-05-01 11:51:44
【问题描述】：

我使用fitToSuppliedMarkers() 作为我的标记，需要在我的地图上添加一些填充。我试图实现this solution，但没有成功。我不能使用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>

【问题讨论】：

标签： react-native react-native-android react-native-maps

【解决方案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};

如果不起作用，请尝试将填充设置为 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 })

【讨论】：

谢谢我尝试了你的解决方案，但不幸的是它没有工作。没有应用填充。
添加了一些我使用并且必须工作的代码。确保你也安装了最新版本的 react-native-maps :)
我不能使用 fitToCoordinates 因为我的标记来自我需要在 componentDidMount 中执行的请求，该方法不支持。