在用react native 做開發(fā)的時(shí)候，用到了Webview這個(gè)組件，而WebView這個(gè)組件還是有不少坑的

坑點(diǎn)1： scalesPageToFit 這個(gè)適配屏幕的屬性

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沒問題，網(wǎng)頁可以自適應(yīng)，但是在Android平臺(tái)上就出問題了，屏幕無法適配，scalesPageToFit 這個(gè)屬性就是適配屏幕的，設(shè)置是否要把網(wǎng)頁縮放到適應(yīng)視圖的大小，以及是否允許用戶改變縮放比例。但是死活就是無法適配；后面看了webView 的源碼 發(fā)現(xiàn)

@ReactProp(name = "scalesPageToFit")

public void setScalesPageToFit(WebView view, boolean enabled) {

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

}

在Android 中是取反的；

所以必須

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

這樣就OK了

坑點(diǎn)2：地址有中文解析不了

/>

如上面地址一樣，React Native webView顯示404 ，這才發(fā)現(xiàn)webView 中有中文或者一些特殊的字符是解析不了 😄的；得先編碼一下

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

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

/>

這樣就OK了

坑點(diǎn)3：ReactNative webview組件android不支持type="file" 打開相機(jī)和相冊(cè)

ReactNative WebView里面type="file"安卓版本無效，因?yàn)镽eactNative的WebView組件里面使用的是原生組件，而安卓的webview原生組件默認(rèn)是不支持上傳和下載的，IOS是支持的，所以才會(huì)出現(xiàn)這種問題。

總結(jié)

以上是生活随笔為你收集整理的android rn 和webview,RN 组件webView 有可能出现的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。