新闻客户端07 - 新闻详情页

知识点
WebView

第一种:
WebView直接加载一个url来展示网页。
观察新闻数据,我们发现有一个3g网页的url

{
      "url_3w": "http://ent.163.com/16/0815/15/BUH64L0J00031H2L.html",
      "postid": "BUH64L0J00031H2L",
      "votecount": 49276,
      "replyCount": 51267,
      "ltitle": "知情人称王宝强借钱是因账户大笔钱一日内被取走",
      "digest": "网易娱乐8月15日报道15日上午9时许,王宝强本人在律师张起淮的陪同下来到北京朝阳法院,起诉其妻马蓉要求离婚。据悉,朝阳法院经审查符合立案条件,已正式受理此案。",
      "url": "http://3g.163.com/ent/16/0815/15/BUH64L0J00031H2L.html",
      "docid": "BUH64L0J00031H2L",
      "title": "知情人称王宝强借钱是因账户大笔钱一日内被取走",
      "source": "网易娱乐",
      "priority": 162,
      "lmodify": "2016-08-15 15:52:00",
      "imgsrc": "http://cms-bucket.nosdn.127.net/9ed8283f475445c4868faba9b72c730620160815153433.png",
      "subtitle": "",
      "boardid": "ent2_bbs",
      "ptime": "2016-08-15 15:30:46"
    },

1、Component/NewsDatail.js新闻详情页

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView,
} from 'react-native';


var NewsDetail = React.createClass({
    render() {
        return (
            <WebView
                automaticallyAdjustContentInsets={true}
                source={{uri: this.props.rowData.url}}
            />
        );
    }
});

const styles = StyleSheet.create({
});

// 输出类
module.exports = NewsDetail;

在Home.js里,传过去了新闻数据rowData

// 点击cell跳转到新闻详情页面
    pushToNewsDetail(rowData){
        this.props.navigator.push({
            component:NewsDetail,
            title:rowData.title,
            passProps:{rowData}
        })
    },

2、所以在NewsDetail.js里面 WebView直接加载rowData.url

 <WebView
     automaticallyAdjustContentInsets={true}
     source={{uri: this.props.rowData.url}}
 />

这里写图片描述
第二种:拼接html
http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html
观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid
下面我们要取出里面的 html代码,然后拼接。
1.NewsDetail.js全部代码:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView,
} from 'react-native';


var NewsDetail = React.createClass({
    getInitialState(){
        return{
            // 具体的数据
            datailData:''
        }
    },

    render() {
        return (
            <WebView
                automaticallyAdjustContentInsets={true}
                source={{html:this.state.datailData, baseUrl:''}}
            />
        );
    },

    componentDidMount(){
        // 请求的路径
        var url_api = 'http://c.3g.163.com/nc/article/'+ this.props.rowData.postid +'/full.html';

        // 发送请求
        fetch(url_api)
            .then((response)=>response.json())
            .then((responseData)=>{
                // 处理json数据
                var allData = responseData[this.props.rowData.postid];
                // 取出body
                var bodyHtml = allData['body'];
                // 取出图片数据
                if(allData['img'].length > 0){
                    for(var i=0;i<allData['img'].length;i++){
                        // 取出单个图片对象
                        var img = allData['img'][i];
                        // 取出图片的src
                        var imgsrc = img['src'];
                        // 拼接html
                        var imgHtml = '<img src="'+imgsrc+'" width="100%"/>';
                        // 替换body中的图像占位符
                        bodyHtml = bodyHtml.replace(img['ref'],imgHtml);
                    }
                }

                // 更新状态机
                this.setState({
                    datailData:bodyHtml,
                });
            })
            .catch((error)=>{
                console.log('请求数据失败');
            })
    },
});

const styles = StyleSheet.create({
});

// 输出类
module.exports = NewsDetail;

2.效果
这里写图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值