Android如何使用react-native-webview加载html支持屏幕自适应并允许缩放

叙述：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支持屏幕自适应并允许缩放介绍完成！

 

更新博文：最新版本react-native-webview无需进行上述设置，直接使用即可；新版react-native-webview已经进行Android优化