新闻客户端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 (<WebViewautomaticallyAdjustContentInsets={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 (<WebViewautomaticallyAdjustContentInsets={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];// 取出bodyvar bodyHtml = allData['body'];// 取出图片数据if(allData['img'].length > 0){for(var i=0;i<allData['img'].length;i++){// 取出单个图片对象var img = allData['img'][i];// 取出图片的srcvar imgsrc = img['src'];// 拼接htmlvar 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.效果

新闻客户端07 - 新闻详情页相关推荐

仿腾讯新闻客户端图片新闻幻灯片动画效果
正在做一个类似腾讯新闻客户端图片新闻幻灯片动画效果,借着这个机会又看了一下android的动画. 源码http://download.csdn.net/detail/u012598233/853134 ...
Android实战简单新闻客户端(2)---新闻分页界面设计
说明文章首发于HURUWO的博客小站,本平台做同步备份发布. 如有浏览或访问异常图片加载失败或者相关疑问可前往原博客下评论浏览. 原文链接安卓实战简单新闻客户端2直接点击即可前往访问. 更多技术文 ...
android 网易新闻登录界面,Android之类似网易新闻客户端首页新闻列表实现思路...
网易新闻客户端首页列表实现思路: 网易新闻客户端的实现主要涉及到三个部分: 1,viewFlow新闻轮播图: 2,pullToRefreshListView,下拉刷新的列表 3,将viewFlow和p ...
利用ListView实现新闻客户端的新闻内容图文混排
如图: 布局文件: <LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/a ...
为什么越来越多的手机浏览器转型新闻客户端？
▍PMCAFF产品经理社区的咖友提问:为什么越来越多的手机浏览器转型新闻客户端? ● ● ● ▍ YDong 某大数据公司产品经理我从用户和生产商两个角度来谈谈. >>>& ...
安卓新闻客户端（二） JSOUP解析HTML 抓取网页内容
最近在做一个安卓新闻客户端,新闻内容解析遇到了些麻烦,内容多样,文字视频图片都有,发现用Jsoup 不是那么好做,就上网查了查直接用用webview,可是用了之后发现显示空白,而且其实网页的大部分信息 ...
网易新闻客户端iOS版本中新闻详情页（UIWebView）技术实现的分析探讨
参考地址:http://blog.csdn.net/shaobo8910/article/details/51719673 本篇博客背景: 1:本人是网易新闻app的忠实用户,大约每天有2~3个小时的 ...
Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试
B站视频 https://www.bilibili.com/video/BV18e411s7A1 https://www.bilibili.com/video/BV1RZ4y1W7CN 本节目标详情 ...
今日头条与网易新闻客户端内容详情页对比
左图为网易新闻客户端,右图为今日头条 1.相同功能点和不同功能点: 2.关键功能差异: 对于资讯类平台,核心是文章以及会产生关联行为的功能,文章,分享,评论,相关阅读等. 2.1 分享:今日头条截图后 ...

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

新闻客户端07 - 新闻详情页相关推荐

最新文章

热门文章