React-Native开发总结-webview
2017-12-14 19:36
369 查看
最近更新时间：2017年12月14日19:36:11
上学的时候希望尽早工作，融入社会，积累工作经验。工作之后才发现，工作永远干不完，而且每个项目都不一样，积累工作经验不是一时半会的事情，而是日积月累细心领悟的过程，因此，需要不断总结和积累所见所闻，保持学习，才能轻松驾驭工作。
在react native项目中，一方面使用RN技术进行APP开发，同时还能在APP中嵌套使用网页，是常见的业务需求。常见方案有三种：使用html文件、URI地址、html代码片段。
0、概述
import { WebView } from 'react-native';
WebView组件，用于创建一个原生的WebView，可以用于访问一个网页；
1、HTML代码片段在WebView中的使用
html代码片段如下，html代码片段的内容可以是图文混编，来源于ajax接口返回的数据(string类型)：
let HTML = '';
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
body {
margin: 0;
padding: 1.5rem .8rem 1.5rem .8rem;
color: #424242;
line-height: 26px;
font-size: .8rem;
}
.content{
font-size: .8rem;
line-height: 1.3rem;
}
img {
dd64
width: 100%;
display: block;
margin: .5rem 0;
}
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="content">
<p>asdfasdf</p>
</div>
</body>
</html>
对HTML代码片段style样式适配(如：禁止长按触发)重置如下：
let arr = HTML.split("<style>");
let disableSelect =`* {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`
if(arr.length > 1){
arr[1] = disableSelect + arr[1];
HTML = arr.join("<style>");
}
APP页面使用方法：
<WebView
ref={webview => {this.webview = webview;}}
onError = {()=>{
ToastAndroid.show(`加载失败，请重试！`,ToastAndroid.SHORT,ToastAndroid.CENTER);
this.props.navigation.goBack()
}}
javaScriptEnabled={true}
domStorageEnabled={true}
onMessage={this.onMessage}
source={{html: HTML}}
/>
获取WebView组件实例的方法：
<WebView ref={webview => {this.webview01 = webview;}} />
console.log(this.webview01);//对象内容如下
<WebView ref={‘WEBVIEW01_REF’} />
console.log(this.refs[WEBVIEW01_REF]);//对象内容如下
2、uri地址在WebView中的使用
uri地址如下，uri的内容可以是PDF文件、doc文件，来源于ajax接口返回的数据(string类型)：
let
uri = 'http://abc.com/aa/bb/cc=='
<WebView
source={{uri: uri}}
/>
3、WebView组件实例详解
WebView组件实例是一个WebView对象，包括属性和方法，如下：
属性：context、props(domStorageEnabled、javaScriptEnabled、onError()、onMessage()、saveFormDataDisabled、scalesPageToFit、source:{}、thirdPartyCookiesEnabled、ref)、refs、state
方法：goBack()、goForward()、onLoadingError()、reloadd()、postMessage()......
使用：
this.refs[WEBVIEW01_REF].onMessage();//在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。
未完，待续...
上学的时候希望尽早工作，融入社会，积累工作经验。工作之后才发现，工作永远干不完，而且每个项目都不一样，积累工作经验不是一时半会的事情，而是日积月累细心领悟的过程，因此，需要不断总结和积累所见所闻，保持学习，才能轻松驾驭工作。
在react native项目中，一方面使用RN技术进行APP开发，同时还能在APP中嵌套使用网页，是常见的业务需求。常见方案有三种：使用html文件、URI地址、html代码片段。
0、概述
import { WebView } from 'react-native';
WebView组件，用于创建一个原生的WebView，可以用于访问一个网页；
1、HTML代码片段在WebView中的使用
html代码片段如下，html代码片段的内容可以是图文混编，来源于ajax接口返回的数据(string类型)：
let HTML = '';
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
body {
margin: 0;
padding: 1.5rem .8rem 1.5rem .8rem;
color: #424242;
line-height: 26px;
font-size: .8rem;
}
.content{
font-size: .8rem;
line-height: 1.3rem;
}
img {
dd64
width: 100%;
display: block;
margin: .5rem 0;
}
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="content">
<p>asdfasdf</p>
</div>
</body>
</html>
对HTML代码片段style样式适配(如：禁止长按触发)重置如下：
let arr = HTML.split("<style>");
let disableSelect =`* {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`
if(arr.length > 1){
arr[1] = disableSelect + arr[1];
HTML = arr.join("<style>");
}
APP页面使用方法：
<WebView
ref={webview => {this.webview = webview;}}
onError = {()=>{
ToastAndroid.show(`加载失败，请重试！`,ToastAndroid.SHORT,ToastAndroid.CENTER);
this.props.navigation.goBack()
}}
javaScriptEnabled={true}
domStorageEnabled={true}
onMessage={this.onMessage}
source={{html: HTML}}
/>
获取WebView组件实例的方法：
<WebView ref={webview => {this.webview01 = webview;}} />
console.log(this.webview01);//对象内容如下
<WebView ref={‘WEBVIEW01_REF’} />
console.log(this.refs[WEBVIEW01_REF]);//对象内容如下
2、uri地址在WebView中的使用
uri地址如下，uri的内容可以是PDF文件、doc文件，来源于ajax接口返回的数据(string类型)：
let
uri = 'http://abc.com/aa/bb/cc=='
<WebView
source={{uri: uri}}
/>
3、WebView组件实例详解
WebView组件实例是一个WebView对象，包括属性和方法，如下：
属性：context、props(domStorageEnabled、javaScriptEnabled、onError()、onMessage()、saveFormDataDisabled、scalesPageToFit、source:{}、thirdPartyCookiesEnabled、ref)、refs、state
方法：goBack()、goForward()、onLoadingError()、reloadd()、postMessage()......
使用：
this.refs[WEBVIEW01_REF].onMessage();//在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。
未完，待续...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【React Native开发】 - WebView组件的使用
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- Android开发之WebView详细总结
- React Native跨平台开发2017 年终总结
- 基于Redux的ReactNative项目开发总结（一）
- ReactNative WebView组件详解
- 在android开发中遇到的WebView控件相应的总结
- 【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)
- WebView开发总结
- React-Native开发总结-组件高级使用方案汇总
- react+webapck+redux+browser-sync+nginx开发总结
- ReactNative-WebView组件
- 混合app开发--js和webview之间的交互总结
- React Native WebView 内点击事件获取onNavigationStateChange、onMessage
- 详解react-native WebView 返回处理(非回调方法可解决)
- 转 [开发总结]WebView使用中遇到的一些问题&解决
- 【React Native开发】React Native控件之View视图讲解(7)
- ReactNative Webview加载本地html异常问题
- React-Native系列Android——自定义View组件开发