/*
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 (
<View style={styles.container}>
<WebView injectedJavaScript="alert('欢迎使用React Native')"
bounces={false}
url="http://weibo.com/vczero"
style={styles.webSize}/>
</View>
);
},
});
var styles = StyleSheet.create ({
container: {
flex:1
},
webSize: {
width:kWidth,
height:kHeight
}
});
AppRegistry.registerComponent('InformationServicesRN', () => APP);
如果想加入自己的HTML代码片段，只需要使用html属性即可，例如我们加载一张照片：
<WebView contentInset={{left:-10,top:-28}}
startInLoadingState={true}
scrollEnabled={false}
html='<div></div>'
style={styles.webSize}/>
新浪微博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 (
<View style={styles.container}>
{
!this.state.code ?
<WebView style={[styles.container, styles.webSize]}
url={url}
onNavigationStateChange={this.navChange}></WebView>
:<Text style={styles.textPosition}>{this.state.code}</Text>
}
</View>
);
},
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',
}
});
