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