在用react native 做开发的时候,用到了Webview这个组件,而WebView这个组件还是有不少坑的
坑点1: scalesPageToFit 这个适配屏幕的属性
return ( <WebView
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:地址有中文解析不了
<WebView source={{uri: "https://www.aaaa.com?userName=张三"}}
/>
如上面地址一样,React Native webView显示404 ,这才发现webView 中有中文或者一些特殊的字符是解析不了 😄的;得先编码一下
let userName = encodeURIComponent(this.props.navigation.state.params.userName);
let url = "https://www.aaaa.com?" +'userName=' + userName;
<WebView source={{uri: url}}
/>
这样就OK了
坑点3:ReactNative webview组件android不支持type="file" 打开相机和相册
ReactNative WebView里面type="file"安卓版本无效,因为ReactNative的WebView组件里面使用的是原生组件,而安卓的webview原生组件默认是不支持上传和下载的,IOS是支持的,所以才会出现这种问题。
解决办法:ReactNative里面的webview使用第三方组件:https://github.com/lucasferreira/react-native-webview-android