【React native】Webview的使用

最新推荐文章于 2024-04-29 00:42:09 发布

wicky121121

最新推荐文章于 2024-04-29 00:42:09 发布

阅读量6.9k

点赞数 1

分类专栏： React native 文章标签： React native

本文链接：https://blog.csdn.net/wicky121121/article/details/52072894

版权

React native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用WebView的方法：

1、申明WebView变量

2、调用方法有两种：

（1）使用接口对接、

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

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

问题处理方法及结果：

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

'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、第三部、将官方案例代码放入到自己的代码中、查看可否运行

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中

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

<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

wicky121121

关注

1
点赞
踩
1

收藏

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

使用WebView的方法：1、申明WebView变量2、调用方法有两种：（1）使用接口对接、（2）直接使用url方式把内容全部取下来3、使用url呈现的方式如下问题处理方法及结果：1、使用如下官方案例代码：'use strict';import React, { AppRegistry, Compon
复制链接

扫一扫