1. 主要属性
- source:在 WebView 中载入一段静态的 html 代码或是一个 url(还可以附带一些 header 选项)
- automaticallyAdjustContentInsets:设置是否自动调整内容。格式:bool
- contentInset:设置内容所占的尺寸大小。格式:{top:number,left:number,bottom:number,right:number}
- injectJavaScript:当网页加载之前注入一段 js 代码。其值是字符串形式。
- startInLoadingState:是否开启页面加载的状态,其值为 true 或者 false。
- bounces(仅iOS):回弹特性。默认为 true。如果设置为 false,则内容拉到底部或者头部都不回弹。
- scalesPageToFit(仅iOS):用于设置网页是否缩放自适应到整个屏幕视图,以及用户是否可以改变缩放页面。
- scrollEnabled(仅iOS):用于设置是否开启页面滚动。
- domStorageEnabled(仅Android):用于控制是否开启 DOM Storage(存储)。
- javaScriptEnabled(仅Android):是否开启 JavaScript,在 iOS 中的 WebView 是默认开启的。
2.主要方法
- onNavigationStateChange:当导航状态发生变化的时候调用。
- onLoadStart:当网页开始加载的时候调用。
- onError:当网页加载失败的时候调用。
- onLoad:当网页加载结束的时候调用。
- onLoadEnd:当网页加载结束调用,不管是成功还是失败。
- renderLoading:WebView组件正在渲染页面时触发的函数,只有 startInLoadingState 为 true 时该函数才起作用。
- renderError:监听渲染页面出错的函数。
- onShouldStartLoadWithRequest(仅iOS):该方法允许拦截 WebView 加载的 URL 地址,进行自定义处理。该方法通过返回 true 或者 falase 来决定是否继续加载该拦截到请求。
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1564.html
3.用法详解
ReactNative 中的 WebView 可以加载一个外部网页,例如下面官网的例子
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source=
style=
/>
);
}
}
有时候可以使用 WebView 弥补一些 ReactNative 内置的组件实现不了的东西,我们可以借助 HTML 来完成,毕竟 HTML 有丰富的工具可以用。例如要想在 ReactNative 里展示图表,原生自带的组件则没办法实现,其他的图表组件都是基于 react-native-svg 实现的,展示效果目前还不足人意。这个时候 HTML 则有一大堆图表工具可以使用,echarts, highcharts 等等等。
接下来我们可以写一个网页,然后使用 uri 外部引用进来。但是把网页放在服务器上,然后 App 引用还是挺啰嗦的。能不能把网页放在应用内部,本地引用呢?当然可以,这个才是这篇博客的主题。
WebView 加载本地 html
假设我们有一个 demo 项目
Demo/
android/
ios/
index.android.js
index.ios.js
packege.json
WebViewScreen.js
pages/
demo.html
...
新建一个文件 WebViewScreen.js
import React from 'react';
import { WebView } from 'react-native';
export default class WebViewScreen extends React.Component {
render() {
return (
<WebView source={require('./pages/demo.html')} />
)
}
}
然后在 index.android.js 和 index.ios.js 修改代码使用 WebViewScreen 展示
...
import WebViewScreen from './WebViewScreen';
class Demo extends React.Component {
render() {
return (
<View>
<WebViewScreen />
</View>
)
}
}
AppRegistry.registerComponent('Demo', () => Demo);
添加个 pages/demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
hello world
</body>
</html>
然后就可以跑起来测试了,iOS 没问题,Android 则不会显示。这是一个已知的问题,目前 0.46 版本还没有解决。但是我们可以想办法绕过去,Android 需要先把静态资源放到 android/app/src/main/assets
目录下面,然后把 require('./pages/demo.html')
换成 {uri: 'file:///android_asset/pages/demo.html'}
。WebViewScreen.js 会是下面这个样子
export default class WebViewScreen extends React.Component {
const source = (Platform.OS == 'ios') ? require('./pages/demo.html') : { uri: 'file:///android_asset/pages/demo.html' }
render() {
return (
<WebView source={source} />
)
}
}
这样 Android 就没问题了,但是要记得同步 pages 目录到 android asset 目录下。
注意 HTML 中可以引用 javascript 但是不能引用 stylesheet, css 可以使用
<style>
内联写在 HTML 里。
传数据给 HTML
有时候不只是纯静态的页面,继续我们之前图表的的例子, 图表的数据是变化的,需要将数据传给 HTML。 借助 WebView injectedJavaScript
属性可以实现从应用传入数据给 HTML。
改造 pages/demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="output"></div>
<script>
function init(data) {
document.getElementById('output').innerHTML = JSON.stringify(data)
}
</script>
</body>
</html>
改造 WebViewScreen.js
export default class WebViewScreen extends React.Component {
const source = (Platform.OS == 'ios') ? require('./pages/demo.html') : { uri: 'file:///android_asset/pages/demo.html' }
render() {
return (
<WebView source={source} injectedJavaScript={this.bootstrapJS()} />
)
}
bootstrapJS() {
const data = { hello: 'world' }
return `init(${JSON.stringify(data)})`
}
}
injectedJavaScript
可以是一段 JavaScript 代码,当页面加载后注入并执行。