android rn 和webview,RN 组件webView 有可能出现的问题

在用react native 做开发的时候，用到了Webview这个组件，而WebView这个组件还是有不少坑的

坑点1： scalesPageToFit 这个适配屏幕的属性

return (

ref = 'awebView'

style={styles.webStyle}

source={{uri: this.state.url, method: 'POST',body : this.state.webViewBody}} // onLoadStart={this.loadStart()}

startInLoadingState={true}

onMessage={this._onMessage}

javaScriptEnabled={true}

/>)

代码就在上面的；在iOS没问题，网页可以自适应，但是在Android平台上就出问题了，屏幕无法适配，scalesPageToFit 这个属性就是适配屏幕的，设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。但是死活就是无法适配；后面看了webView 的源码 发现

@ReactProp(name = "scalesPageToFit")

public void setScalesPageToFit(WebView view, boolean enabled) {

view.getSettings().setUseWideViewPort(!enabled);

}

在Android 中是取反的；

所以必须

scalesPageToFit={Platform.OS === 'ios'? true : false}

这样就OK了

坑点2：地址有中文解析不了

/>

如上面地址一样，React Native webView显示404 ，这才发现webView 中有中文或者一些特殊的字符是解析不了 😄的；得先编码一下

let userName = encodeURIComponent(this.props.navigation.state.params.userName);

let url = "https://www.aaaa.com?" +'userName=' + userName;

/>

这样就OK了

坑点3：ReactNative webview组件android不支持type="file" 打开相机和相册

ReactNative WebView里面type="file"安卓版本无效，因为ReactNative的WebView组件里面使用的是原生组件，而安卓的webview原生组件默认是不支持上传和下载的，IOS是支持的，所以才会出现这种问题。