修复 ios 动画过程中创建的 MapView 宽高可能超出的问题

[yinhangfeng]

相关 issue #251 #428 #435
大概原因是 RN 会使用 setBounds 设置控件宽高 https://github.com/facebook/react-native/blob/master/React/Views/UIView+React.m#L200
然后高德地图的 setBounds 可能被重写过了导致在动画过程中创建的 MapView 宽高会随机超出
解决方法是给 MapView 包一层 UIView 就好了

具体深入的原因我也不是很清楚，因为我是开发 Android 的...

[wei63w]

你好 , 非常感谢你的帮助, 安卓我明天试下, 我今天试的是ios的, 再套了一个view后 额... 真是神奇啊, 以前是以左上角等比放大, 然而套了一个view后 上下不再变化了 但是宽度还是向右侧拉伸 貌似一倍左右, 唉...

• 我尝试了在rander渲染前获取宽高 然后写死赋值给mapview , 依然没什么用... ,
• 然后尝试了在渲染完毕后判断异常显示的时候重新修改值... 使用setstate方式的时候貌似会死循环 直接修改又没什么用, 使用setNativeProps方式又undefined... 依然没什么用... ,

你的现在有出现过我这个问题么? 不是必出 偶尔出

[yinhangfeng]

你好 , 非常感谢你的帮助, 安卓我明天试下, 我今天试的是ios的, 再套了一个view后 额... 真是神奇啊, 以前是以左上角等比放大, 然而套了一个view后 上下不再变化了 但是宽度还是向右侧拉伸 貌似一倍左右, 唉...

• 我尝试了在rander渲染前获取宽高 然后写死赋值给mapview , 依然没什么用... ,
• 然后尝试了在渲染完毕后判断异常显示的时候重新修改值... 使用setstate方式的时候貌似会死循环 直接修改又没什么用, 使用setNativeProps方式又undefined... 依然没什么用... ,

你的现在有出现过我这个问题么? 不是必出 偶尔出

我这边在 RN 0.57 下没碰到你说的问题

[wei63w]

你好 , 非常感谢你的帮助, 安卓我明天试下, 我今天试的是ios的, 再套了一个view后 额... 真是神奇啊, 以前是以左上角等比放大, 然而套了一个view后 上下不再变化了 但是宽度还是向右侧拉伸 貌似一倍左右, 唉...

• 我尝试了在rander渲染前获取宽高 然后写死赋值给mapview , 依然没什么用... ,
• 然后尝试了在渲染完毕后判断异常显示的时候重新修改值... 使用setstate方式的时候貌似会死循环 直接修改又没什么用, 使用setNativeProps方式又undefined... 依然没什么用... ,

你的现在有出现过我这个问题么? 不是必出 偶尔出

我这边在 RN 0.57 下没碰到你说的问题

好吧,

[qiuxiang]

感谢你提供的方向，我需要时间确定这个问题以及对这个问题的修复情况。

[zhuhengtan]

这个问题修复没有...要改哪里啊

[wei63w]

这个问题修复没有...要改哪里啊

安卓的好像 你只要在 mapview 外面套一个 view 就好了没太关注
ios 的 需要改 amap3d 的源代码 ,是在初始化 view 的那个里面, 你打个断点或者是 log 看一下 里面的frame bounds 的值是有时候没值的有时候又有值, 做个判断赋值就行了.

[zhuhengtan]

这个问题修复没有...要改哪里啊

安卓的好像 你只要在 mapview 外面套一个 view 就好了没太关注
ios 的 需要改 amap3d 的源代码 ,是在初始化 view 的那个里面, 你打个断点或者是 log 看一下 里面的frame bounds 的值是有时候没值的有时候又有值, 做个判断赋值就行了.

哦哦好的，谢谢啦，我试一下

[zhuhengtan]

这个问题修复没有...要改哪里啊

安卓的好像 你只要在 mapview 外面套一个 view 就好了没太关注
ios 的 需要改 amap3d 的源代码 ,是在初始化 view 的那个里面, 你打个断点或者是 log 看一下 里面的frame bounds 的值是有时候没值的有时候又有值, 做个判断赋值就行了.

做了这个设置，还是不行哎，可以看到右下角打印出来宽度是335，但是显示的还是有问题。。。

[wangdanting]

兼容android与iOS的解决方法：
第一步：在外层套个View，样式设置宽高和overflow: hidden
第二步：将高度或者宽度写成变量，页面渲染完后，过1s后让地图重新渲染。

state = {
  mapHeight: 200
};

componentDidMount(){
  setTimeout(() => {
    this.setState(prev => ({
      mapHeight: prev.mapHeight + 1
    }));
  }, 1000);
}

<View style={{height: 200, overflow: 'hidden'}}>
  <MapView style={{ width: "100%", height: this.state.mapHeight }}>
  </MapView>
</View>