React native Webview的使用

最新推荐文章于 2022-08-29 18:35:44 发布

barnett_y

最新推荐文章于 2022-08-29 18:35:44 发布

阅读量2.4k

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章 29 订阅

订阅专栏

使用WebView的方法：

1、申明WebView变量

2、调用方法有两种：

（1）使用接口对接、

（2）直接使用url方式把内容全部取下来

3、使用url呈现的方式如下

问题处理方法及结果：

1、使用如下官方案例代码：

[javascript]view plaincopy 
   
 'use strict';  
 import React, {  
   AppRegistry,  
   Component,  
   StyleSheet,  
   Text,  
   View,  
   WebView,  
 } from 'react-native';  
 var html = '<!DOCTYPE html><html><body><h1>This is a heading!</body></html>';  
 var HelloWorld = React.createClass({  
   render: function() {  
     return (  
       <View style={styles.container}>  
         <WebView source={{html: html}}/>  
       </View>  
     );  
   },  
 });  
 var styles = StyleSheet.create({  
     container:{    
        backgroundColor:'#00ff00',  
        height:200,  
        width:300,  
        flex:1,  
     }  
 });  
    
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);  

如下是结果：

3、第三部、将官方案例代码放入到自己的代码中、查看可否运行

[javascript]view plaincopy 
   
 var React = require('react-native');  
 var Util = require('./../common/util');  
 var ServiceURL = require('./../common/service');  
 var PublicItem = require('./public_item');  
 var Header = require('./../common/header');  
 var HTMLView = require('react-native-htmlview')  
 var {  
     StyleSheet,  
     Text,  
     View,  
     ListView,  
     Image,  
     ScrollView,  
     TouchableOpacity,  
     WebView  
 } = React;  
 var html = '<!DOCTYPE html><html><body><h1>This is a heading!</body></html>';  
 module.exports = React.createClass({  
     getInitialState: function() {  
         return {  
             data: null  
         };  
     },  
     render: function() {  
         return (  
             // <ScrollView style={styles.m10}>  
         // {  
           this.state.data ?  
             <View>  
               <Header  
                 navigator={this.props.navigator}  
                 initObj={{  
                     backName: '主页',  
                     title: '舆情详情'  
                 }}/>  
               <PublicItem row={this.state.data}/>  
               <View style={styles.container}>  
                 <WebView  
                    // source={{html: this.state.data.content}}  
                     source={{html: html}}  
                    // source={{url: 'http://120.26.216.13:6080/yql/ws/contentdetail?uuid=9678940aeb2203c8542bfa6de01863b2'}}  
                 />  
             </View>  
               <View style={[styles.row,{marginTop:10}]}>  
                 <Text style={[styles.title]}>来源：搜狗新闻</Text>  
                 <Text style={[styles.pages]}>点击：27</Text>  
                 <Text style={[styles.pages]}>转发：88</Text>  
                 <Text style={[styles.pages]}>评论：4</Text>  
                 <Text style={[styles.pages]}>this.state.content</Text>  
               </View>  
               <View>  
                 <Text style={[styles.title]}>相似舆情</Text>  
                 <Text style={[styles.text]}>江苏科技大学：青春青春青春青春大赛</Text>  
                 <Text style={[styles.text]}>江苏科技大学：青春青春青春青春大赛</Text>  
                 <Text style={[styles.text]}>江苏科技大学：青春青春青春青春大赛</Text>  
                 <Text style={[styles.text]}>江苏科技大学：青春青春青春青春大赛</Text>  
                 <Text style={[styles.text]}>江苏科技大学：青春青春青春青春大赛</Text>  
               </View>  
               <View style={{height:100}}></View>  
             </View>  
             : Util.loading  
         // }  
       // </ScrollView>  
         );  
     },  
   
     componentDidMount: function() {  
         var uuid = this.props.id;  
         var that = this;  
         var url = ServiceURL.public_detail + '?uuid=' + uuid;  
         Util.get(url, function(data) {  
             that.setState({  
                 data: data.detail  
             });  
         }, function(err) {  
             alert(err);  
         });  
     }  
 });  
   
 var styles = StyleSheet.create({  
     container:{    
        backgroundColor:'#00ff00',  
        height:200,  
        width:300,  
        flex:1,  
     },  
     m10: {  
         flex: 1  
     },  
     title: {  
         fontSize: 16,  
         marginLeft: 10,  
         marginTop: 10,  
         marginBottom: 10  
     },  
     text: {  
         marginLeft: 10,  
         marginRight: 10,  
         color: '#666666'  
     },  
     webviewContent: {  
         height:500  
     },  
     pages: {  
         marginLeft: 30,  
         color: '#A7A0A0'  
     },  
     row: {  
         flexDirection: 'row'  
     },  
 });  

样式如下：说明没有任何问题：

继续查原因、对比官方文档和自己代码的差异、发现官方代码中webview是嵌套在view中的、所以问题就出在我之前的代码webview在外层没有嵌套在view中

继续测试、把代码模块化、

[javascript]view plaincopy 
   
 <View style={styles.container}>  
     <WebView  
         source={{html: this.state.data.content}}  
         // source={{html: html}}  
         // source={{url: 'http://120.26.216.13:6080/yql/ws/contentdetail?uuid=9678940aeb2203c8542bfa6de01863b2'}}  
     />  
  </View>  

最重结果、nice

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React native Webview的使用

使用WebView的方法：1、申明WebView变量2、调用方法有两种：（1）使用接口对接、（2）直接使用url方式把内容全部取下来3、使用url呈现的方式如下问题处理方法及结果：1、使用如下官方案例代码：[javascript] view plain copy'
复制链接

扫一扫