React Native（iOS）新手小白零基础自学（八）WebView组件

/*
  WebView支持的属性如下：
    1.automaticallyAdjustContentInsets：表示是否自动调整内部内容，其值为true或false
    2.bounces：回弹效果。如果为false，则内容拉倒底部或头部不回弹。默认为true
    3.contentInset：内部内容偏移值，该值是一个JavaScript对象{top:number, left:number, bottom:number, right:number}。
    4.html：HTML代码字符串。如果传入了HTML代码字符串，则渲染该HTML代码。
    5.injectedJavaScript：注入的JavaScript代码，其值为字符串。如果加上了该属性，就会在WebView里面执行JavaScript代码。
    6.onNavigationStateChange：监听导航状态变化的函数。
    7.renderError：监听渲染页面出错的函数
    8.startInLoadingState：是否开启页面加载的状态，其值为true或false。
    9.renderLoading：WebView组件正在渲染页面时触发的函数，需要同startInLoadingState一起使用。
                    当startInLoadingState为true时该函数才起作用。
    10.scrollEnabled：表示WebView里面页面是否能滚动。
    11.onNavigationStateChange:页面导航状态改变时，触发该事件监听。
    12.scalesPageToFit：按照页面比例和内容宽高比例自动缩放内容。
*/

以微博页面为例：

3375DCBD-C730-4FCC-9E98-65660063D6F0.png

var React = require('react-native');
var Dimensions = require('Dimensions');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  WebView
} = React;

var kWidth = Dimensions.get('window').width;
var kHeight = Dimensions.get('window').height;

var APP = React.createClass({
  render: function(){
    return (
      
        
      
    );
  },
});

var styles = StyleSheet.create ({
  container: {
    flex:1
  },
  webSize: {
    width:kWidth,
    height:kHeight
  }
});

AppRegistry.registerComponent('InformationServicesRN', () => APP);

如果想加入自己的HTML代码片段，只需要使用html属性即可，例如我们加载一张照片：

新浪微博OAuth认证

BB9637CB-EC02-42EB-8ED3-CBF0DF620D2E.png

var appKey = '4263807830'
var callback = 'http://127.0.0.1:3000';
var url = 'https://api.weibo.com/oauth2/authorize?client_id=' + appKey + '&redirect_uri=' + callback;


var APP = React.createClass({

  getInitialState: function(){
    return {
      code:null
    };
  },

  render: function(){
    return (
      
        {
          !this.state.code ?
            
                   :{this.state.code}
        }
      
    );
 },
  navChange: function(state){
    var _that = this;
    //不懂...
    if (state.url.indexOf(callback + "/?code=") > -1) {
      var code = state.url.split('?code=')[1];
      //TODO:这里可以使用code去交换accessToken
      _that.setState({
        code:code
      });
    }
  }
});

var styles = StyleSheet.create ({
  container: {
    flex:1
  },
  webSize: {
    width:kWidth,
    height:kHeight
  },
  textPosition: {
    marginTop:20,
    textAlign:'center',
  }
});