新闻客户端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.效果