1.Home.js:

/**
* 首页
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
Platform
} from 'react-native'; // 导入本地json数据
var LocalData = require('../LocalData.json'); 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(){
return(
<View>
<Text>头部视图</Text>
</View>
)
}, // 返回LisView中的单个cell
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.5}>
<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,
// 侧轴对齐方式
alignItems:'center',
// 设置下边框
borderBottomColor:'#e8e8e8',
borderBottomWidth:0.8,
},
imgStyle:{
width:90,
width:90,
},
rightViewStyle:{
width:260,
marginLeft:10,
},
mainTitleStyle:{
fontSize:16,
marginBottom:5,
},
subTitleStyle:{
fontSize:14,
color:'gray',
},
}); // 输出类
module.exports = Home;

2.效果图

react-native 项目实战 -- 新闻客户端(5) -- 完善首页列表数据的更多相关文章

  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. react-native 项目实战 -- 新闻客户端(6) -- 完善ListView头部视图

    1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * ...

  6. react-native 项目实战 -- 新闻客户端(2) -- 完善TabBar

    1.创建 drawable-xxhdpi 文件夹,保存 TabBar 的 icon图标 android  --  app  --  src  --  main  --  res  --  drawab ...

  7. react-native 项目实战 -- 新闻客户端(7) -- 新闻详情页

    http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html 观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid.  ...

  8. react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  9. react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器

    1.修改后的 Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, Vie ...

随机推荐

  1. Javascript时间差计算函数代码实例

    Javascript时间差计算函数代码实例 <script language="javascript"> Date.prototype.dateDiff = funct ...

  2. UVA 10746 Crime Wave - The Sequel

    最小费用最大流 源点->警察->bank->汇点 剩下的模板就可以 #include <map> #include <set> #include <li ...

  3. Linux之epoll详细解析实现

    /* * fs/eventpoll.c (Efficient event retrieval implementation) * Copyright (C) 2001,...,2009 Davide ...

  4. 解决:java.lang.ArrayIndexOutOfBoundsException: 160 at com.alibaba.fastjson.serializer.SerializeWriter.writeStringWithDoubleQuote(SerializeWriter.java:868)

    今天线上遇到一个问题,从hbase里读取出来的数据在转换json后输出时出现异常: java.lang.ArrayIndexOutOfBoundsException: 160 at com.aliba ...

  5. hdu 5159(概率)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5159 题解:假设在 x 张牌中选b张牌,那么有 x^b 种选法,如果在 (x-1) 张牌中选 b 张 ...

  6. 洛谷 P3955 图书管理员【模拟/思维】

    题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的读者手中有一个需求码,这个需求码也是一个正整数.如果一本书的图 书编码恰好以读者的需求码结尾,那 ...

  7. My first blog on cnBlogs!

    以后会长期更新自己的心得体会!以此锻炼自己,奋发向前.

  8. 安装php5.4.10时, 错误:‘gdIOCtx’ 没有名为 ‘data’ 的成员

    安装php5.4.10时, 错误:‘gdIOCtx’ 没有名为 ‘data’ 的成员 在安装php时,报如下错误 In file included from /kk/php-5.4.0/ext/gd/ ...

  9. 查看linux内核版本及操作系统版本的命令

    一.查看内核版本命令: (1)[root@localhost ~]#cat/proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012.b ...

  10. 发掘StateListAnimator的全部潜能

    原文地址:https://blog.stylingandroid.com/statelistanimator/ 原文作者:Leave a reply 译文出自:安卓巴士 译者: MrlLee 校对者: ...