在用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是支持的，所以才會出現這種問題。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。