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.Home.js

/**
* 首页
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
Platform,
} from 'react-native'; // 引入Dimensions类库
var Dimensions = require('Dimensions');
var ScreenW = Dimensions.get('window').width; // 导入本地json数据
var LocalData = require('../LocalData.json'); // 导入外部的组件类
var ScrollImage = require('../Component/ScrollImage'); var Home = React.createClass({
// 不可改变的默认值
getDefaultProps(){
return{
url_api:'http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html',
key_word:'T1348647853363'
}
}, // 初始化
getInitialState(){
return{
// ListView头部轮播图的数据源
headerDataArr:[],
// cell的数据源
dataSource: new ListView.DataSource({
rowHasChanged:(r1,r2)=>{r1 !== r2}
})
}
}, render() {
return (
<View style={styles.container}>
{/*导航条*/}
{this.renderNavBar()}
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}, // 导航条
renderNavBar(){
return(
<View style={styles.navOutViewStyle}>
<Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>首页</Text>
</View>
)
}, // 返回ListView头部视图
renderHeader(){
// 如果没有头部banner数据
if(this.state.headerDataArr.length == 0) return; return(
<ScrollImage
imageDataArr={this.state.headerDataArr}
/>
)
}, // 返回LisView中的单个cell
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.8}>
<View style={styles.cellViewStyle}>
<Image source={{uri:rowData.imgsrc}} style={styles.imgStyle} />
<View style={styles.rightViewStyle}>
<Text style={styles.mainTitleStyle}>{rowData.title}</Text>
<Text style={styles.subTitleStyle}>{rowData.digest}</Text>
</View>
</View>
</TouchableOpacity>
)
}, // 组件加载完毕之后调用
componentDidMount(){
// 请求网络数据
this.loadDataFromNet();
}, // 请求网络数据的方法
loadDataFromNet(){
fetch(this.props.url_api)
.then((response)=>response.json())
.then((responseData)=>{
// 拿到需要的数据
var jsonData = responseData[this.props.key_word]; // 处理数据
this.dealWithData(jsonData);
})
.catch((error)=>{
if(error){
// 网络请求失败,就用本地数据
console.log('网络请求失败');
var jsonData = LocalData[this.props.key_word];
this.dealWithData(jsonData);
}
})
}, // 处理网络数据的细节方法
dealWithData(jsonData){
// 定义临时变量
var headerArr = [], listDataArr = [];
// 遍历拿到的json数据
for (var i=0;i<jsonData.length;i++){
// 取出单个对象
var data = jsonData[i];
if(data.hasAD == 1){
// 取出广告数据
headerArr = data.ads;
}else {
// 非广告数据(行数据)
listDataArr.push(data)
}
} // 更新状态机
this.setState({
// ListView头部轮播图的数据源
headerDataArr:headerArr,
// cell的数据源
dataSource:this.state.dataSource.cloneWithRows(listDataArr),
}); console.log(headerArr,listDataArr);
},
}); const styles = StyleSheet.create({
// 导航条视图
navOutViewStyle:{
height:Platform.OS === 'ios' ? 64 : 44,
backgroundColor:'#468AFF',
// 主轴方向
flexDirection:'row',
// 侧轴对齐方式 垂直居中
alignItems:'center',
// 主轴方向居中
justifyContent:'center',
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
cellViewStyle:{
// 主轴方向
flexDirection:'row',
padding:10,
// 设置下边框
borderBottomColor:'#e8e8e8',
borderBottomWidth:0.8,
},
imgStyle:{
width:90,
width:90,
backgroundColor:'gray',
},
rightViewStyle:{
width:ScreenW - 90 - 10 * 2,
marginLeft:10,
},
mainTitleStyle:{
fontSize:16,
marginBottom:5,
},
subTitleStyle:{
fontSize:14,
color:'gray',
},
}); // 输出类
module.exports = Home;

.

react-native 项目实战 -- 新闻客户端(7) -- 新闻详情页的更多相关文章

  1. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  2. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  3. React Native 项目实战 -- DoubanProject

    引言:本文是我研究react-native时写的一个简单的demo,代码里有详细的注释,好废话不多说,直接上代码. 1.项目目录 2.index.android.js /** * index.andr ...

  4. React Native项目实战

    算是学习React Native的一次项目总结吧,目的还是提高自己. 包含的内容: 1>仿"美团"页面的实现; 2>封装项目中和自己常用的一些组件; 3>学习别人 ...

  5. [RN] React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页头部 效果

    React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页效果 效果如下: 一.安装依赖 npm install react-native- ...

  6. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  7. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  8. react native项目启动需要做的操作

    一.启动: 1.查看端口(默认8081是否被占用) netstat -ano   可以查看所有的进程 2.netstat -ano | findstr "8081"  查看某个端口 ...

  9. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  10. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

随机推荐

  1. SSM+redis整合(mybatis整合redis做二级缓存)

    SSM:是Spring+Struts+Mybatis ,另外还使用了PageHelper 前言: 这里主要是利用redis去做mybatis的二级缓存,mybaits映射文件中所有的select都会刷 ...

  2. Application binary interface and method of interfacing binary application program to digital computer

    An application binary interface includes linkage structures for interfacing a binary application pro ...

  3. PO-BO-VO-DTO-POJO-DAO

    POJO,BO,VO的关系: 简单理解:http://www.blogjava.net/vip01/archive/2007/01/08/92430.html 全面:https://www.cnblo ...

  4. C 实现删除非空文件夹

    /* 文件名:   rd.c ---------------------------------------------------- c中提供的对文件夹操作的函数,只能对空文件夹进行 删除,这使很多 ...

  5. 记录常见的HTTP请求错误

    服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF 解决方案:winfrom 在app.config种添加 web 在 web.config种添 ...

  6. 【linux高级程序设计】(第九章)进程间通信-管道 1

    Linux操作系统所支持的主要进程间的通信机制. 无名管道 PIPE cat test.txt| grep hello 上面这种管道,将一个命令的输出作为另一个命令的输入,而这种管道是临时的,命令执行 ...

  7. J.U.C并发框架源码阅读(十二)ConcurrentHashMap

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentHashMap 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Us ...

  8. POJ 3253 Fence Repair【哈弗曼树/贪心/优先队列】

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 53645   Accepted: 17670 De ...

  9. Kali Linux Wine32英文字体不显示问题

     Kali Linux Wine32英文字体不显示问题 Kali Linux提供了Wine32工具.在运行Wine32后,界面可以显示中文,但不能显示英文文字.英文文字均显示为方块.这是由于缺少对应的 ...

  10. 【bzoj4152】【The Captain】最短路(堆优化)(浅尝ACM-B)

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62834538 Description 给定平面上 ...