React native WebView 适配Android(安卓)和 Ios的问题
16lz
2021-01-25
在用react native 做开发的时候,用到了Webview这个组件,基本用法可以参考:
https://reactnative.cn/docs/0.51/webview.html#content
我的代码大概:
render() { console.log("99999" + this.state.loaderr) if (!this.state.loaderr) { return ( ); } else { return ( 网络连接失败,点击重试 ) }
但是 在ios 手机上是OK的,h5网页可以自适应,但是在Android平台上就出问题了,屏幕无法适配,scalesPageToFit 这个属性就是适配屏幕的,设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。但是死活就是无法适配,
然后网上各种资料查找,比较少,于是查看Webview源码:
路径:
./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview
在ReactWebViewManager.java 里 我看到了这段代码:
@ReactProp(name = "scalesPageToFit") public void setScalesPageToFit(WebView view, boolean enabled) { view.getSettings().setUseWideViewPort(!enabled); }
卧槽。。。。竟然取反了,,。。
于是我把scalesPageToFit={true} ,试了一把果然 OK啦。。。
应该算是一个React native的一个bug了吧,
最终这样写适配双平台:
scalesPageToFit={Platform.OS === 'ios'? true : false}
更多相关文章
- 没有一行代码,「2020 新冠肺炎记忆」这个项目却登上了 GitHub 中
- Android中如何实现WebView与JavaScript的相互调用
- android,利用layoutParams代码动态布局空间位置
- Android与服务器通信——http方式通信
- Android(安卓)自定义View 慢慢画一个不同颜色扇形的圆,点击圆上不
- Tiny210 从源代码开始创建Android
- Android(安卓)WebView 加载本地SD卡的html
- Android实现点击获取验证码60秒后重新获取功能
- android view增加点击效果,如:iReader书架书籍点击变暗