基础篇章：关于 React Native 之 WebView 的讲解

   <p>今天讲解的这个组件真的是很基础，不用多说，相信大家关于这个控件，一看就会。当然实践才是检验自己最好的方法。</p>    <p>大家好，我就是很多人喜欢用，而且常用的组件：WebView ，我就是WebView ，WebView 就是我。我的功能就是一句：在本地视图中呈现web内容。给我一个链接，我还你一堆内容。非常的神奇吧，这就像，牛吃进去的是草，拉出来的是……不对，哈哈，开个玩笑。和我玩其实很简单，了解我的性格特点，再给我一个吃的，我就能给你玩出你想要的花样。</p>    <h2>我的属性</h2>    <ul>     <li>automaticallyAdjustContentInsets bool 设置是否自动调整内嵌插页内容</li>     <li>contentInset 设置网页内嵌内容大小，距离上下左右边距</li>     <li>injectedJavaScript string 设置在网页加载之前注入的一段JS代码</li>     <li>mediaPlaybackRequiresUserAction bool 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为false</li>     <li>onError function 网页加载失败时调用</li>     <li>onLoad function 网页加载成功时调用</li>     <li>onLoadEnd function 网页加载结束时（无论成功或失败）调用</li>     <li>onLoadStart function 网页加载开始时调用</li>     <li>onNavigationStateChange function 当导航状态发生变化时回调</li>     <li>renderError function 渲染视图错误时使用</li>     <li>renderLoading function 该函数功能是返回一个加载指示器</li>     <li>scalesPageToFit bool 设置是否要把网页缩放到适应视图的大小，和改变缩放比例</li>     <li>source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 存放加载静态html或者url等</li>     <li>startInLoadingState bool 强制webview在第一次加载时是否显示加载视图</li>     <li>domStorageEnabled bool android 控制dom存储是否启用</li>     <li>javaScriptEnabled bool android 是否启用支持js</li>     <li>userAgent string android 设置userAgent</li>     <li>allowsInlineMediaPlayback bool ios 指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放，默认值为false。</li>     <li>bounces bool ios 设置当它到达内容的边缘web视图是否反弹。默认值是true。</li>     <li>dataDetectorTypes DataDetectorTypes, [object Object] ios 确实可点击的url类型</li>     <li>decelerationRate ScrollView.propTypes.decelerationRate ios 滚动滑动速率</li>     <li>onShouldStartLoadWithRequest function ios</li>     <li>scrollEnabled bool ios 是否滚动</li>    </ul>    <p>看看，我的性格还是很多变的吧，这么多，其实用起来都是很简单的，不信看实例。</p>    <h2>我的娇羞展示</h2>    <h3>效果图</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9ad2edbbb7206099af51d4b19ee85134.gif"></p>    <h3>实例代码</h3>    <pre>  <code class="language-javascript">/**   * Sample React Native App   * https://github.com/非死book/react-native   * @flow   */    import React, { Component } from 'react';  import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    WebView  } from 'react-native';    WEBVIEW_REF = 'webview';    export default classWebViewDemoextendsComponent{    render() {      return (         <Viewstyle={styles.container}>          <Viewstyle={styles.title_view}>             <TouchableOpacity              onPress={this.goBack.bind(this)}              >              <Textstyle={styles.title_text}>                 返回              </Text>            </TouchableOpacity>           <Textstyle={styles.title_text}>                 非著名程序员           </Text>            <TouchableOpacity              onPress={this.goForward.bind(this)}              >           <Textstyle={styles.title_text}>                 前进           </Text>           </TouchableOpacity>          </View>          <WebView            ref={WEBVIEW_REF}            source={{uri: 'http://godcoder.me/'}}            startInLoadingState={true}            domStorageEnabled={true}            javaScriptEnabled={true}            automaticallyAdjustContentInsets={true}        />        </View>        );    }        goBack(){          this.refs[WEBVIEW_REF].goBack();          }            goForward(){          this.refs[WEBVIEW_REF].goForward();         }  }    const styles = StyleSheet.create({     container: {      flex: 1,      backgroundColor: 'white',    },     title_view:{      flexDirection:'row',      height:50,      paddingLeft:15,      paddingRight:15,      justifyContent: 'space-between',      alignItems: 'center',      backgroundColor:'#27b5ee',    },     title_text:{      color:'white',      fontSize:22,      textAlign:'center'    },  });    AppRegistry.registerComponent('WebViewDemo', () => WebViewDemo);  </code></pre>    <p>是不是很简单，对就是这么简单，赶紧行动起来学习吧。好记性不如敲代码。</p>    <p> </p>    <p>来自：http://godcoder.me/2017/03/14/基础篇章：关于 React Native 之 WebView 的讲解/</p>    <p> </p>