React-Native 之 GD (十四)小时风云榜 及 当前时间操作 及 上一小时、下一小时功能实现
1.小时风云榜
GDHourList.js
/**
* 小时风云榜
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
ListView,
Dimensions,
ActivityIndicator,
Modal, // 模态
AsyncStorage, // 缓存数据库(数据持久化)
} from 'react-native'; // 引入 下拉刷新组件
import {PullList} from 'react-native-pull';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 获取屏幕宽高
const {width, height} = Dimensions.get('window'); // 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 公共cell
import CommunalCell from '../main/GDCommunalCell';
// 引入 详情页 组件
import CommunalDetail from '../main/GDCommunalDetail';
// 引入 空白页组件
import NoDataView from '../main/GDNoDataView'; export default class GDHourList extends Component { // 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
loaded:false,
prompt:'',
};
// 初始化
this.data = [];
this.nowHour = 0;
this.loadData = this.loadData.bind(this);
} // 网络请求
loadData(resolve) { // 当前小时数
this.nowHour = new Date().getHours(); let params = {}; HTTPBase.get('https://guangdiu.com/api/getranklist.php', params)
.then((responseData) => { // 情况数组(刷新时)
this.data = []; // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 关闭刷新动画
if (resolve !== undefined){
setTimeout(() => {
resolve();
}, 1000);
}
})
.catch((error) => { })
} // 根据时间加载数据
dataFromTime(hour, date) { let params = {
"date": date,
"hour": hour
}; HTTPBase.get('https://guangdiu.com/api/getranklist.php', params)
.then((responseData) => { // 情况数组(刷新时)
this.data = []; // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 关闭刷新动画
if (resolve !== undefined){
setTimeout(() => {
resolve();
}, 1000);
}
})
.catch((error) => { })
} // 跳转到设置
pushToSettings() { } // 返回中间标题
renderTitleItem() {
return(
<Image source={{uri:'navtitle_rank_106x20'}} style={styles.navbarTitleItemStyle} />
);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity
onPress={()=>{this.pushToSettings()}}
>
<Text style={styles.navbarRightItemStyle}>设置</Text>
</TouchableOpacity>
);
} // 根据网络状态决定是否渲染 listview
renderListView() {
if (this.state.loaded === false) {
return(
<NoDataView />
);
}else {
return(
<PullList
onPullRelease={(resolve) => this.loadData(resolve)}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
showsHorizontalScrollIndicator={false}
style={styles.listViewStyle}
initialListSize={5}
/>
);
}
} // 跳转到详情页
pushToDetail(value) {
this.props.navigator.push({
component:CommunalDetail,
params: {
url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
}
})
} // 返回每一行cell的样式
renderRow(rowData) {
return(
<TouchableOpacity
onPress={() => this.pushToDetail(rowData.id)}
>
<CommunalCell
image={rowData.image}
title={rowData.title}
mall={rowData.mall}
pubTime={rowData.pubtime}
fromSite={rowData.fromsite}
/>
</TouchableOpacity>
);
} // dom渲染完毕后调用
componentDidMount() {
this.loadData();
} // 当前时间
nowDate() {
let date = new Date(); // 获取当前时间 let year = date.getFullYear(); // 年
let month = date.getMonth(); // 月
let day = date.getDate(); // 日 if(month >= 1 && month <= 9) { // 在 10 以内,我们手动添加 0
month = "0" + (month + 1); // 注意:js 中月份是以 0 开始的
} if(day >= 1 && day <= 9){ // 在 10 以内,我们手动添加 0
day = "0" + day;
} return year + month + day;
} // 点击 上一小时 按钮
lastHour() {
// 减去一小时
let hour = this.nowHour - 1; this.dataFromTime(hour, this.nowDate()); // 重新赋值回去
this.nowHour = hour;
} // 点击 下一小时 按钮
nextHour() { // 减去一小时
let hour = this.nowHour + 1; this.dataFromTime(hour, this.nowDate()); // 重新赋值回去
this.nowHour = hour;
} render() {
return (
<View style={styles.container}>
{/* 导航栏样式 */}
<CommunalNavBar
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
/> {/* 提醒栏 */}
<View style={styles.promptViewStyle}>
<Text>提示框</Text>
</View> {/* 根据网络状态决定是否渲染 listview */}
{this.renderListView()} {/* 操作栏 */}
<View style={styles.operationViewStyle}>
<TouchableOpacity
onPress={() => this.lastHour()}
>
<Text style={{marginRight:10, fontSize:17, color:'green'}}>{"< " + "上1小时"}</Text>
</TouchableOpacity> <TouchableOpacity
onPress={() => this.nextHour()}
>
<Text style={{marginLeft:10, fontSize:17, color:'green'}}>{"下1小时" + " >"}</Text>
</TouchableOpacity>
</View>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'white',
}, navbarTitleItemStyle: {
width:106,
height:20,
marginLeft:50
},
navbarRightItemStyle: {
fontSize:17,
color:'rgba(123,178,114,1.0)',
marginRight:15,
}, promptViewStyle: {
width:width,
height:44,
alignItems:'center',
justifyContent:'center',
backgroundColor:'rgba(251,251,251,1.0)',
}, operationViewStyle: {
width:width,
height:44,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
},
});
效果图:
2.对当前时间的处理
// 当前时间
nowDate() {
let date = new Date(); // 获取当前时间 let year = date.getFullYear(); // 年
let month = date.getMonth(); // 月
let day = date.getDate(); // 日 if(month >= 1 && month <= 9) { // 在 10 以内,我们手动添加 0
month = "0" + (month + 1); // 注意:js 中月份是以 0 开始的
} if(day >= 1 && day <= 9){ // 在 10 以内,我们手动添加 0
day = "0" + day;
} return year + month + day;
}
3.按照官方数据实现 提示栏、上一小时、下一小时 的功能
GDHourList.js
/**
* 小时风云榜
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
ListView,
Dimensions,
ActivityIndicator,
Modal, // 模态
AsyncStorage, // 缓存数据库(数据持久化)
} from 'react-native'; // 引入 下拉刷新组件
import {PullList} from 'react-native-pull';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 获取屏幕宽高
const {width, height} = Dimensions.get('window'); // 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 公共cell
import CommunalCell from '../main/GDCommunalCell';
// 引入 详情页 组件
import CommunalDetail from '../main/GDCommunalDetail';
// 引入 空白页组件
import NoDataView from '../main/GDNoDataView'; export default class GDHourList extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
loaded:false,
prompt:'',
};
// 定义变量,由于临时存储数据
this.nexthourhour = ''; // 下一个小时时间
this.nexthourdate = ''; // 下一个小时日期
this.lasthourhour = ''; // 上一个小时时间
this.lasthourdate = ''; // 上一个小时日期
this.loadData = this.loadData.bind(this);
} // 网络请求
loadData(resolve, date, hour) {
let params = {}; if (date) {
params = {
"date" : date,
"hour" : hour
}
} HTTPBase.get('http://guangdiu.com/api/getranklist.php', params)
.then((responseData) => { // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data),
loaded:true,
prompt:responseData.displaydate + responseData.rankhour + '点档' + '(' + responseData.rankduring + ')' // 提示栏
}); // 关闭刷新动画
if (resolve !== undefined){
setTimeout(() => {
resolve();
}, 1000);
} // 暂时保留一些数据(赋值)
this.nexthourhour = responseData.nexthourhour;
this.nexthourdate = responseData.nexthourdate;
this.lasthourhour = responseData.lasthourhour;
this.lasthourdate = responseData.lasthourdate;
})
.catch((error) => { })
} // 跳转到设置
pushToSettings() { } // 返回中间标题
renderTitleItem() {
return(
<Image source={{uri:'navtitle_rank_106x20'}} style={styles.navbarTitleItemStyle} />
);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity>
<Text style={styles.navbarRightItemStyle}>设置</Text>
</TouchableOpacity>
);
} // 根据网络状态决定是否渲染 listview
renderListView() {
if (this.state.loaded === false) {
return(
<NoDataView />
);
}else {
return(
<PullList
onPullRelease={(resolve) => this.loadData(resolve)}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
showsHorizontalScrollIndicator={false}
style={styles.listViewStyle}
initialListSize={5}
/>
);
}
} // 跳转到详情页
pushToDetail(value) {
this.props.navigator.push({
component:CommunalDetail,
params: {
url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
}
})
} // 返回每一行cell的样式
renderRow(rowData) {
return(
<TouchableOpacity
onPress={() => this.pushToDetail(rowData.id)}
>
<CommunalCell
image={rowData.image}
title={rowData.title}
mall={rowData.mall}
pubTime={rowData.pubtime}
fromSite={rowData.fromsite}
/>
</TouchableOpacity>
);
} // dom渲染完毕后执行
componentDidMount() {
this.loadData();
} // 点击 上一小时 按钮
lastHour() {
this.loadData(undefined, this.lasthourdate, this.lasthourhour);
} // 点击 下一小时 按钮
nextHour() {
this.loadData(undefined, this.nexthourdate, this.nexthourhour);
} render() {
return (
<View style={styles.container}>
{/* 导航栏样式 */}
<CommunalNavBar
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
/> {/* 提醒栏 */}
<View style={styles.promptViewStyle}>
<Text>{this.state.prompt}</Text>
</View> {/* 根据网络状态决定是否渲染 listview */}
{this.renderListView()} {/* 操作栏 */}
<View style={styles.operationViewStyle}>
<TouchableOpacity
onPress={() => this.lastHour()}
>
<Text style={{marginRight:10, fontSize:17, color:'green'}}>{"< " + "上1小时"}</Text>
</TouchableOpacity> <TouchableOpacity
onPress={() => this.nextHour()}
>
<Text style={{marginLeft:10, fontSize:17, color:'green'}}>{"下1小时" + " >"}</Text>
</TouchableOpacity>
</View>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'white',
}, navbarTitleItemStyle: {
width:106,
height:20,
marginLeft:50
},
navbarRightItemStyle: {
fontSize:17,
color:'rgba(123,178,114,1.0)',
marginRight:15,
}, promptViewStyle: {
width:width,
height:44,
alignItems:'center',
justifyContent:'center',
backgroundColor:'rgba(251,251,251,1.0)',
}, operationViewStyle: {
width:width,
height:44,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
},
});
效果图:
.
React-Native 之 GD (十四)小时风云榜 及 当前时间操作 及 上一小时、下一小时功能实现的更多相关文章
- React-Native 之 GD (十七)小时风云榜按钮处理
小时风云榜按钮处理 在服务器返回给我们的 json 数据中,提供了 hasnexthour 字段,当这个字段返回为 1 的时候,表示后面还有内容,按钮可以点击,否则不能点击,按照这个思路,我们就来完成 ...
- React Native学习(十)—— 生命周期
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React文档(十四)深入JSX
根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...
- Java进阶(十四)实现每天定时对数据库的操作
Java实现每天定时对数据库操作 现在有一个很棘手的问题:客户要求实现一个功能,就是每日凌晨自动计算慢性病订单是否有需要在今日提醒的,如果有则生成一条提醒记录到lm_notice之中. 如何在Web工 ...
- (十四)、shell脚本之shell基础(上)
一.shell脚本介绍 1.使用脚本的原因 其中使用脚本的一个最主要的原因是因为一个字"懒",在处理自动循环或者大的任务方面可以偷懒且省时间,如果有处理一个任务的命令清单,一个任务 ...
- 从零开始学ios开发(十四):Navigation Controllers and Table Views(上)
这一篇我们将学习一个新的控件Navigation Controller,很多时候Navigation Controller是和Table View紧密结合在一起的,因此在学习Navigation Co ...
- 第五十四节,socketserver通讯模块实现并发操作,真多线程并发
socketserver通讯模块实现并发操作,基于select.epoll.socket.多线程,实现的正真多线程多并发 socketserver通讯模块底层调用的socket模块,只是它作了处理基于 ...
- salesforce 零基础学习(六十四)页面初始化时实现DML操作
有的时候我们往往会遇到此种类似的需求:用户在访问某个详细的记录时,需要记录一下什么时候哪个用户访问过此页面,也就是说进入此页面时,需要插入一条记录到表中,表有用户信息,record id,sObjec ...
- 十四、文件和目录——文件时间和utime函数
14.1 文件时间 存在于 stat 结构体中 14.2 文件时间函数 14.2.1 介绍 utime(修改文件的存取时间和更改时间) 相关函数 utimes,stat #include <sy ...
随机推荐
- composer安装thinkphp5
之前安装过composer,里面的一些命令符可以看看,安装tp5我也是按照文档来的,也没什么难度.但是也出现一些问题: 安装tp5: 安装在本地php环境的www目录下,通过命令窗口切换到www目录下 ...
- [LeetCode] 39. 组合总和
题目链接 : https://leetcode-cn.com/problems/combination-sum/ 题目描述: 给定一个无重复元素的数组 candidates 和一个目标数 target ...
- P2218 [HAOI2007]覆盖问题
传送门 首先可以想到二分答案,然后考虑判断 注意到所有点的外包矩形的四条边一定要被覆盖到,而正方形只有 $3$ 个,所以一定有一个正方形在角落 考虑爆搜,枚举正方形在当前外包矩形的那个角,然后对剩下的 ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- 计算机系统结构总结_Scoreboard and Tomasulo
Textbook:<计算机组成与设计——硬件/软件接口> HI<计算机体系结构——量化研究方法> QR 超标量 前面讲过超标量的概念.超标量的目的就是实现指 ...
- 2019 上海市大学生网络安全大赛 RE部分WP
这次比赛就做了这一道逆向题,看到队友的WP,下面的对v10的加密方式为RC4,从我提取的v4数组就能够察觉出这是CR4了,自己傻乎乎的用OD调试,跟踪数据半天才做出来,还是见得的少了... ...下面 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- intellij idea 的快捷键方法
1.Ctrl+N按名字搜索类 相当于eclipse的ctrl+shift+R,输入类名可以定位到这个类文件,就像idea在其它的搜索部分的表现一样,搜索类名也能对你所要搜索的内容多个部分进行匹配,而且 ...
- Python multiprocessing使用详解
multiprocessing包是Python中的多进程管理包. 与threading.Thread类似,它可以利用multiprocessing.Process对象来创建一个进程. 该进程可以运行在 ...
- angular,,以及深度拷贝问题;JSON.parse,JSON.stringify灵活运用
问题: $scope.list = [];$scope.listTree = {};$scope.dataTree = []; //获取listTree的数据$scope.getList = func ...