React-Native学习笔记-WebView

Posted by Lazy on July 3, 2016

##WebView

  • 这该WebView组件进行创建渲染一个原生的WebView,进行加载一个网页

##属性方法

  • 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视图用来显示一个加载进度指示器
  • url string 设置加载的网页地址
  • domStorageEnabled bool 该适合Android平台 该只适合于Android平台,用于控制是否开启DOM Storage(存储)
  • avaScriptEnabled bool 该适合于Android平台,是否开启javascript

##实例代码

'use strict';
import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  WebView,
} from 'react-native';
var DEFAULT_URL = 'https://github.com/l123456789jy';

var RnDemo = React.createClass({
  render: function() {
    return (
      <View style=>
        <Text style=>简单的网页显示</Text>
        <WebView style={styles.webview_style}
                 source=
                 startInLoadingState={true}
                 domStorageEnabled={true}
                 javaScriptEnabled={true}
        >
        </WebView>
      </View>
    );
  },
});
var styles = StyleSheet.create({
  webview_style:{
    backgroundColor:'#00ff00',
  }
});

AppRegistry.registerComponent('RnDemo', () => RnDemo);