react-native的WebView使用

属性介绍

domStorageEnabled bool 是否储存dom元素
injectJavaScript?: function 在网页加载完成之后，还可以主动调用此方法（以ref形式调用）继续给WebView注入JS代码。注入后会立即执行。
injectedJavaScript string 设置在网页加载之前注入的一段JS代码。
mediaPlaybackRequiresUserAction bool 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true.
onError function 加载失败时调用。
onLoad function 加载成功时调用。
onLoadEnd function 加载结束时（无论成功或失败）调用。
onLoadStart function 加载开始时调用。
onMessage function 在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中，即event.nativeEvent.data。data 只能是一个字符串。
javaScriptEnabled bool 仅限Android平台。iOS平台JavaScript是默认开启的。
onNavigationStateChange function
renderError function 设置一个函数，返回一个视图用于显示错误。
renderLoading function 设置一个函数，返回一个加载指示器。
source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。
scalesPageToFit bool 设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
startInLoadingState bool 强制WebView在第一次加载时先显示loading视图。默认为true。
mixedContentMode?: enum(‘never’, ‘always’, ‘compatibility’)
指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容。

可选的mixedContentMode值如下：

‘never’ (默认) - WebView不允许安全链接页面中加载非安全链接的内容。
‘always’ - WebView允许安全链接页面中加载非安全链接的内容。
‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致。
saveFormDataDisabled?: bool 用于控制页面上的表单是否启用自动保存/自动补全功能。仅Android有效。
userAgent string 为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但js端的设置会覆盖原生端的设置。

                <WebView                    ref={WEBVIEW_REF}                    automaticallyAdjustContentInsets={false}                    style={styles.webView}                    source={{uri: this.state.url}}                    javaScriptEnabled={true}                    domStorageEnabled={true}                    decelerationRate="normal"                    onNavigationStateChange={this.onNavigationStateChange}                    onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}                    startInLoadingState={true}                    scalesPageToFit={this.state.scalesPageToFit}                />    onNavigationStateChange = (navState) => {        this.setState({            backButtonEnabled: navState.canGoBack,            forwardButtonEnabled: navState.canGoForward,            url: navState.url,            status: navState.title,            loading: navState.loading,            scalesPageToFit: true        });    };    onShouldStartLoadWithRequest = (event) => {        // Implement any custom loading logic here, don't forget to return!        return true;    };