React Native Webview使用

RN为我们提供了WebView组件来加载一个网页。

/**
* Created by gyg on 2017/5/4.
*/
'use strict'
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
WebView,
BackAndroid,
} from 'react-native';

class WebLoadingView extends Component {

render() {
return (
<View style={{flex:1,justifyContent:'center',
alignItems:'center',backgroundColor:'#f2f2f2'}}>
<Text style={styles.loadingText}>
页面正在加载...
</Text>
</View>
)
}
}

export default class WebViewScene extends Component {

// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
url: "",
title: "",
loading: true,
isBackButtonEnable: false,
isForwardButtonEnable: false
};
}

componentDidMount() {
BackAndroid.addEventListener("webHardwareBackPress", ()=> {
try {
if (this.state.isBackButtonEnable) {
this.refs._webView.goBack();//返回上一个页面
return true;//true 系统不再处理 false交给系统处理
}
} catch (error) {
return false;
}
return false;
})
}

componentWillUnmount() {
BackAndroid.removeEventListener("webHardwareBackPress");
}

render() {
return (
<View style={styles.container}>
<WebView
style={styles.webView}
ref="_webView"
source={{uri:this.props.route.extras.url}}//获取url参数
automaticallyAdjustContentInsets={true}
domStorageEnabled={true}
javaScriptEnabled={true}
scalesPageToFit={true}
startInLoadingState={true}
renderLoading={()=>{return <WebLoadingView/>}}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
/>
</View>
)
}

//WebView导航状态改变
_onNavigationStateChange(navState) {
this.setState({
url: navState.url,
title: navState.title,
loading: navState.loading,
isBackButtonEnable: navState.canGoBack,
isForwardButtonEnable: navState.canGoForward,
})
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f2f2f2",
},
webview: {
flex: 1,
},
loadingText: {
color: '#8a8a8a',
fontSize: 16
}
})

source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string} 加载url，加载静态html

javaScriptEnabled bool android 是否启用支持js

automaticallyAdjustContentInsets bool 设置是否自动调整内容

domStorageEnabled bool 适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）

scalesPageToFit bool 适合iOS平台 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面

onError function 网页加载失败时调用

onLoad function 方法 当网页加载结束的时候调用

onLoadEnd function 网页加载结束时（无论成功或失败）调用

onLoadStart function 网页加载开始时调用

onNavigationStateChange function 当导航状态发生变化时回调

renderError function 渲染视图错误时使用

renderLoading function 该函数功能是返回一个加载指示器

startInLoadingState bool 强制webview在第一次加载时是否显示加载视图

userAgent string android 设置userAgent

allowsInlineMediaPlayback bool 该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性

bounces bool 该适合iOS平台 设置是否有界面反弹特性

onShouldStartLoadWithRequest function 该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求

scrollEnabled bool 该适合iOS平台 用于设置是否开启页面滚动

跳转到展示网页页面：

this.props.navigator.push({
component: WebViewScene,
extras: {
url: 'https://www.jd.com',//网页url
}
})

源码