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:{ 90, 90, backgroundColor:'gray', }, rightViewStyle:{ ScreenW - 90 - 10 * 2, marginLeft:10, }, mainTitleStyle:{ fontSize:16, marginBottom:5, }, subTitleStyle:{ fontSize:14, color:'gray', }, }); // 输出类 module.exports = Home;
.