webview的坑

做移动端适配坑是真的多

最近遇到一个react 项目webview页面在ios端的bug

描述一下问题： 就是从原生页面进入webview页面的h5页面

在h5页面存在页面跳转的时候，也就是二级的H5页面，然后返回第一个H5页面，就会出现顶部空白，但是手指触摸一下屏幕就恢复正常了

原因分析： 1.一级h5页面中有较大的图片，可能是因为图片太大未加载
2.原生ios端webview会记住上级h5页面浏览的位置，返回的时候由于react生命周期原因数据未能及时更新
3. h5页面布局的问题，原生页面就只能展示移动端设备的一整屏，但是h5一个页面可以很长，滚动影响造成

解决方案：1.每次进入一个新的页面都刷新（不符合react 的设计模式）

              2. 将react 组件的最外层标签设置高度为100vh, 更符合原生移动端设计风格（更好的解决方案）

转载于:https://www.cnblogs.com/chengxu931106/p/9322240.html