2. IT
    3. React Native控件之WebView

    React Native控件之WebView

    xiaoxiao2021-03-25  156

    项目中遇到WebView

    /** * Created by tulin1 on 2017/2/14. */ import React, {Component} from 'react'; import { WebView, View, StyleSheet, Dimensions } from 'react-native'; import NavBar from '../Navigator/PublicNavBar' const {width, height} = Dimensions.get('window'); export default class WebViewCPIC extends Component { constructor(props){ super(props); this.state = { navTitle :"", scalesPageToFit:true } } render() { return ( <View style={{flex: 1,backgroundColor:'white'}}> <NavBar title={this.state.navTitle} backPage={()=>this.backPage()}/> <WebView style={styles.webview_style} ref="webViewRef" source={{uri: this.props.url}} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} scalesPageToFit={true} onNavigationStateChange = {this._onNavigationStateChange.bind(this)} /> </View> ); } //获取页面title，URL，loading, canGoBack, canGoForward _onNavigationStateChange(navState){ let title = Math.abs(navState.title.indexOf('http'))?navState.title:''; this.setState({ navTitle:title, scalesPageToFit:true }); } backPage() { this.props.navigator.pop(); } } const styles = StyleSheet.create({ webview_style:{ backgroundColor:'white', }, });

    (一)前言

    http://blog.csdn.net/developer_jiangqq/article/details/50676379

             【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org       

            今天我们一起来看一下WebView组件讲解以及使用实例

              刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)，请不要重复加群！,欢迎各位大牛,ReactNative技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

              该WebView组件进行创建渲染一个原生的WebView，进行加载一个网页。

    (二)属性方法

    继承可以使用View组件的所有属性和Style(具体查看:http://facebook.github.io/react-native/docs/view.html#content 和http://facebook.github.io/react-native/docs/view.html#style)automaticallyAdjustContentInsets bool   设置是否自动调整内容contentInset  {top:number,left:number,bottom:number,right:number}  设置内容所占的尺寸大小html  string  WebView加载的HTML文本字符串injectJavaScript  string 当网页加载之前进行注入一段js代码onError function  方法 当网页加载失败的时候调用onLoad  function 方法  当网页加载结束的时候调用onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败onLoadStart  function  当网页开始加载的时候调用onNavigationStateChange function方法  当导航状态发生变化的时候调用renderError  function  该方法用于渲染一个View视图用来显示错误信息renderLoagin function  该方法用于渲染一个View视图用来显示一个加载进度指示器startInLoadingState  bool  url  string  设置加载的网页地址allowsInlineMediaPlayback  bool   该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性bounces bool  该适合iOS平台 设置是否有界面反弹特性domStorageEnabled bool  该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）javaScriptEnabled  bool  该适合于Android平台，是否开启javascript，在iOS中的WebView是默认开启的onShouldStartLoadWithRequest  function  该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求scalesPageToFit  bool  该适合iOS平台  用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面scrollEnabled  bool    该适合iOS平台 用于设置是否开启页面滚动

    (三)实战实例

           上面我已经对于WebView组件的基本介绍以及相关属性方法做了讲解，下面我们用几个实例来演示一下WebView组件的使用。

           3.1.先演示一个WebView组件最基本的使用方法，直接加载一个网页，具体代码如下:

    [html]  view plain  copy   'use strict';   import React, {     AppRegistry,     Component,     StyleSheet,     Text,     View,     WebView,   } from'react-native';   var DEFAULT_URL = 'http://www.lcode.org';       var WebViewDemo =React.createClass({     render: function() {       return (         <View style={{flex:1}}>           <TextstyleTextstyle={{height:40}}>简单的网页显示</Text>           <WebViewstyleWebViewstyle={styles.webview_style}             url={DEFAULT_URL}             startInLoadingState={true}             domStorageEnabled={true}             javaScriptEnabled={true}             >           </WebView>         </View>       );     },   });   var styles =StyleSheet.create({       webview_style:{           backgroundColor:'#00ff00',         }   });       AppRegistry.registerComponent('WebViewDemo',() => WebViewDemo);  

    运行效果截图如下:

       3.2.WebView加载本地的HTML静态字符串，具体代码如下:

    [html]  view plain  copy   'use strict';   import React, {     AppRegistry,     Component,     StyleSheet,     Text,     View,     WebView,   } from'react-native';   var DEFAULT_URL = 'http://www.lcode.org';   const HTML = `   <!DOCTYPEhtml>\n   <html>     <head>       <title>HTML字符串</title>       <metahttp-equivmetahttp-equiv="content-type" content="text/html;charset=utf-8">       <meta name="viewport"content="width=320, user-scalable=no">       <style type="text/css">         body {           margin: 0;           padding: 0;           font: 62.5% arial, sans-serif;           background: #ccc;         }         h1 {           padding: 45px;           margin: 0;           text-align: center;           color: #33f;         }       </style>     </head>     <body>       <h1>加载静态的HTML文本信息</h1>     </body>   </html>   `;   var WebViewDemo =React.createClass({     render: function() {       return (         <View style={{flex:1}}>           <WebViewstyleWebViewstyle={styles.webview_style}             html={HTML}             startInLoadingState={true}             domStorageEnabled={true}             javaScriptEnabled={true}             >           </WebView>         </View>       );     },   });   var styles =StyleSheet.create({       webview_style:{           backgroundColor:'#00ff00',         }   });       AppRegistry.registerComponent('WebViewDemo',() => WebViewDemo);  

     运行效果截图如下:

    转载请注明原文地址: https://ju.6miu.com/read-2480.html

    技术

    最新回复(0)