叙述:react-native中自带的webview对iOS的适配很友好,对Android的适配简直掉渣;现在记录一下探索方案!
一、方案
react-native-webview本身不支持Android自适应,现在需要使用react-native-webview去实现该需求;
二、实现方式
如何引入webview就不描述了,具体去看官网!直接上代码:
<WebView refs="webview" style={{ // flex: 1, // backgroundColor: 'white', width: SCREEN_WIDTH, // marginBottom: 85, } } automaticallyAdjustContentInsets={true} javaScriptEnabled={true} saveFormDataDisabled={true} scalesPageToFit={false} contentInset={{top:0,left:0,right:0,bottom:0}} // onError={this.onError.bind(this)} // onMessage={this.onMessage.bind(this)} injectedJavaScript={` const meta = document.createElement('meta'); meta.setAttribute('content', 'initial-scale=0,minimum-scale=0, maximum-scale=5.0,user-scalable=yes'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `} source={{html: htmls, baseUrl: ''}} />
三:下面简单介绍一下代码中的定义是如何使用的:
onError={this.onError.bind(this)}
onMessage={this.onMessage.bind(this)}
这两个方法看字面意思就不需要介绍了,可以自己去拓展;
代码中SCREEN_WIDTH定义:
var SCREEN_WIDTH=Dimensions.get(‘window’).width;
代码中scalesPageToFit定义(重点):
官网给的解释:设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。
四:scalesPageToFit定义(重点):
官网给的解释:设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。
但是,这里只适用于iOS;看一下它的底层代码:
./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview
在ReactWebViewManager.java 里有这样一段设置scalesPageToFit的代码:
@ReactProp(name = "scalesPageToFit") public void setScalesPageToFit(WebView view, boolean enabled) { view.getSettings().setUseWideViewPort(!enabled); }
所以,Android平台的应该将scalesPageToFit设置为false,才能允许用户改变缩放比例,这还仅仅是支持缩放,还不能达到完美的自适应;
五:以上都设置好之后,需要注入h5代码(全文关键):
通过injectedJavaScript属性将JavaScript代码注入h5页面:
injectedJavaScript={` const meta = document.createElement(‘meta’); meta.setAttribute(‘content’, ‘initial-scale=0,minimum-scale=0, maximum-scale=5.0,user-scalable=yes’); meta.setAttribute(‘name’, ‘viewport’); document.getElementsByTagName(‘head’)[0].appendChild(meta); `}
具体的几个属性介绍:
width – viewport的宽度 height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
关于h5的详细介绍有兴趣的同学可以查找相关资料详细研究!
以上有关Android如何使用react-native-webview加载html支持屏幕自适应并允许缩放介绍完成!