您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页RN 组件webView 有可能出现的问题

RN 组件webView 有可能出现的问题

来源:二三四教育网

在用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: 
                />

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

let  userName = encodeURIComponent(this.props.navigation.state.params.userName);
let url =   +'userName=' + userName;
<WebView source={{uri: url}}
                />

这样就OK了

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

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务