React Native系列——WebView组件使用介绍
一、介绍
WebView组件进行创建渲染一个原生的WebView,可以加载一个网页,并且具有网页的特性。 二、属性
三、注意事项1、给的网址链接必须加 http:// 否则访问不了 2、很多属性其实试验了,但是没有看出有什么效果,就没有写上来 3、react-native-webview-bridge和react-native-webtrc是两个可以和页面通信的插件 四、完整代码效果图 代码 importReact,{ AppRegistry,Component,StyleSheet,Text,View,WebView,TouchableHighlight,Alert }from'react-native'; exportdefaultclassAppextendsComponent{ constructor(props){ super(props); this.state={ src:'http://www.oschina.net/' }; } goQQ=()=>{ this.setState({ src:'http://www.qq.com/' }); } goOSC=()=>{ this.setState({ src:'http://www.oschina.net/' }); } goBack=()=>{ this.refs.webview.goBack(); } goForward=()=>{ this.refs.webview.goForward(); } reload=()=>{ this.refs.webview.reload(); } render(){ return( <Viewstyle={styles.container}> <Viewstyle={styles.header}> <Viewstyle={[styles.left]}> <TouchableHighlight onPress={()=>this.goOSC()} > <Textstyle={[styles.text]}>OSChina</Text> </TouchableHighlight> </View> <Viewstyle={[styles.left]}> <TouchableHighlight onPress={()=>this.goQQ()} > <Textstyle={[styles.text]}>腾讯图片</Text> </TouchableHighlight> </View> </View> <Viewstyle={styles.subHeader}> <TouchableHighlight onPress={()=>this.goBack()} > <Textstyle={[styles.text]}>后退</Text> </TouchableHighlight> <TouchableHighlight onPress={()=>this.reload()} > <Textstyle={[styles.text]}>刷新</Text> </TouchableHighlight> <TouchableHighlight onPress={()=>this.goForward()} > <Textstyle={[styles.text]}>前进</Text> </TouchableHighlight> </View> <WebView ref="webview" source={{uri:this.state.src}} startInLoadingState={true} renderLoading={()=><Text>正在加载页面...</Text>} /> </View> ); } } conststyles=StyleSheet.create({ container:{ flex:1,backgroundColor:'#F5FCFF',},header:{ flexDirection:'row',justifyContent:'space-between',height:60,backgroundColor:'green',subHeader:{ flexDirection:'row',backgroundColor:'yellow',text:{ color:'#333333',marginBottom:5,backgroundColor:'#00ced1',fontSize:25,textAlign:'center',left:{ justifyContent:'center',alignItems:'center' },right:{ justifyContent:'center',alignItems:'center' } }); 参考文章https://github.com/facebook/react-native/tree/master/Examples/UIExplorer http://reactnative.cn/docs/0.25/webview.html#content
免责说明1、本博客中的文章摘自网上的众多博客,仅作为自己知识的补充和整理,并分享给其他需要的coder,不会用于商用。 2、因为很多博客的地址看完没有及时做保存,所以很多不会在这里标明出处,非常感谢各位大牛的分享,也希望大家理解。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |