React Native 仿天猫物流跟踪时间轴

最近心血来潮开始学习ReactNative，正好最近有一个项目可能会用到时间轴，页面原型类似于天猫的物流跟踪，如下图

分析之后决定使用ListView来实现，左边的时间轴则使用Art来绘制。

分析左边的时间轴，其实就是每一行都有一条竖线，第一行和最后一行稍微特殊些，第一行需要单独绘制一下，最后一行只显示轴结点上方的线。

为了方便使用，封装成组件，具体实现如下：

import React, { Component } from 'react';
import {View,Text,ListView,StyleSheet,ART
} from 'react-native';const { Surface, Shape, Path } = ART;export default class TimeAxis extends React.Component {constructor(props) {super(props);this.state = {rowHeight: 60,dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2,}),};}componentDidMount() {if (this.props.direction) {this.props.dataSource = this.props.dataSource.reverse();}this.setState({rowHeight: this.props.rowHeight ? this.props.rowHeight : this.state.rowHeight,dataSource: this.state.dataSource.cloneWithRows(this.props.dataSource ? this.props.dataSource : [])})}_renderRow = (rowData, sectionID, rowID) => {var item;if (this.props.row) {item = this.props.row(rowData, rowID, this.state.dataSource.getRowCount());} else {item = <Text>{rowData}</Text>}const line = new Path();const circle = new Path();let circleColor = "#e1e1e1";var back;if (rowID == 0) {line.moveTo(12, 27).lineTo(12, this.state.rowHeight).close();circle.moveTo(12, 9).arc(0, 14, 7).arc(0, -14, 7).close();circleColor = "#59c93b";back = <ART.Shape style={{ zoom: 999, opacity: 0.1 }} d={new Path().moveTo(12, 6).arc(0, 20, 10).arc(0, -20, 10).close()} fill="#d3e2cf"></ART.Shape>}else {let y = this.state.rowHeight;if (rowID == this.state.dataSource.getRowCount() - 1) {y = this.state.rowHeight * 0.25;}line.moveTo(12, 0).lineTo(12, y).close();circle.moveTo(12, this.state.rowHeight * 0.25).arc(0, 10, 5).arc(0, -10, 5).close();}var itemStyles = this.props.itemStyle ? [styles.item_content, this.props.itemStyle] : styles.item_content;return (<View style={[styles.item, { height: this.state.rowHeight }]}><View style={[styles.item_line]}><ART.Surface width={24} height={this.state.rowHeight}>{back}<ART.Shape d={circle} fill={circleColor} stroke="#e1e1e1" strokeWidth={1}></ART.Shape><ART.Shape d={line} stroke="#e1e1e1" strokeWidth={1}></ART.Shape></ART.Surface></View><View style={itemStyles}>{item}</View></View >);}render() {return (<ListViewstyle={{ marginTop: 5, backgroundColor: '#fff' }}dataSource={this.state.dataSource}renderRow={this._renderRow.bind(this)}renderFooter={this.renderFooter}/>);}
}
const styles = StyleSheet.create({item: {marginTop: 1,backgroundColor: '#fff',flexDirection: 'row'},item_line: {flex: 2,paddingLeft: 5,},item_content: {flex: 13,borderBottomWidth: 1,borderColor: '#b0b0b0'}
});

使用就简单了，设置好dataSource

var source = [{ Text: "包裹等待揽收", Time: "2017-06-02 11:49:00" },{ Text: "[北京市]XX快递 北京XX中心收件员XX已揽件", Time: "2017-06-02 15:49:05" },{ Text: "[北京市]北京XX中心已发出", Time: "2017-06-02 16:20:11" },{ Text: "[北京市]快件已到达XX站点", Time: "2017-06-02 20:15:04" },{ Text: "[北京市]XX站点员：XXX正在派件", Time: "2017-06-03 07:35:18" },{ Text: "[北京市]已完成", Time: "2017-06-03 08:21:48" }];

设置行高(默认60)，设置好每行的显示格式，就可以了。

<TimeAxisitemStyle={{}}rowHeight={60}dataSource={source}row={(rowData, i, count) => {var fontColor = '#757575';if (i == 0) {fontColor = 'green';}return (<View style={{ height: '100%', padding: 5 }}><Text style={{ color: fontColor, flex: 1 }}>{rowData.Text}</Text><Text style={{ color: fontColor, alignItems: 'flex-end' }}>{rowData.Time}</Text></View>
                            );}}/>

最张效果如图：

转载于:https://www.cnblogs.com/efenghuo/p/7069821.html

React Native 仿天猫物流跟踪时间轴相关推荐

仿美团下拉菜单 html,React Native仿美团下拉菜单的实例代码
本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面 ...
React Native 仿 ofo 共享单车 App
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn http:/ ...
React Native 仿开眼 App
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言前 ...
React Native仿美团下拉菜单
本篇博客转自:http://blog.csdn.net/xiangzhihong8/article/details/76862097 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效 ...
react native仿微信性别选择-自定义弹出框
简述要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果实现一.配置弹出框弹出框用的是:react-native-popup-dialog(Git地址 ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...

React Native 仿天猫物流跟踪时间轴

React Native 仿天猫物流跟踪时间轴相关推荐

最新文章

热门文章