[RN 实战 - 嘎嘎商城] 之仿快递时间轴布局实现

江清清
2,749 阅读5分钟

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(www.lcode.org)

(一)前言

这段时间正在开发更新React Native嘎嘎商城实战项目,项目暂时只是适配Android版本，大部分布局页面正在开发中，业务逻辑功能以及iOS版本适配会后面进行。当前的商城客户端后期会继续开发商品点单，订单，购物车，支付，商品列表以及详情，搜索功能，定位切换，国际化多语言切换，第三方账号登录以及分享等相关功能。也欢迎广大开发者多提建议。同时现阶段的版本会进行Redux框架重构。项目地址:github.com/jiangqqlmj/…

 今天主要跟大家讲解一下订单状态或者快递效果的时间轴的功能实现。

刚创建的React Native交流八群:533435865,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)功能介绍

          大家在使用美团外卖或者淘宝的时候，会看到订单状态以及快递状态这种的时间轴的功能效果，在我们的嘎嘎商城中也是需要看到每个订单的实时状态的。所以我们一起来实现一下啦。具体效果如下:

订单状态

我们来分析一下实现方法，对于这样的布局，一种方案是直接ScrollView动态的进行添加每一项的View布局即可，当然我们这边不采用这种方案。第二种方案:直接采用ListView组件即可。这边的实例中的状态值是5项，采用ListView实现可以添加header view以及footer view，这样其实ListView加载就是中间三项就行了。当然我们也可以不采用这种方案，ListView直接加载这五项状态，其中第一项和最后一项进行判断一下。因为大家看一下上面的效果截图会发现第一项和最后一项的那个竖线是显示一半的。

查看图片

(三)功能实现

          3.1.首先来给大家一种实现方式，采用ListView直接加载五个节点的数据，然后判断首项以及最后一项，加载不同的布局即可，具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  Image,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ListView,
} from 'react-native';
const ORDER_STATUS_DATA={
      "api":"GetSearchHistory",
    "v":"1.0",
    "code":"0",
    "msg":"success",
    "data":[{
        "id":0,
        "status":"订单已提交",
        "remark":"请耐心等待商家确认",
        "time":"8月5日 18:13"
    },{
        "id":1,
        "status":"支付成功",
        "remark":"",
        "time":"8月5日 18:15"
    },{
        "id":2,
        "status":"商家已接单",
        "remark":"商品准备中,由商家配送,配送进度请咨询商家",
        "time":"8月5日 18:20"
    },{
         "id":3,
        "status":"配送进行中",
        "remark":"你的商品正由XX配送员火速送达中...",
        "time":"8月5日 18:25"
    },{
         "id":4,
        "status":"订单完成",
        "remark":"任何意见和吐槽,都欢迎联系我们",
        "time":"8月5日 18:34"
    }]
};
var STATUS_IMGS=[
     require('./imgs/ic_order_status_tijiao.png'),  
     require('./imgs/ic_order_status_zhifu.png'),  
     require('./imgs/ic_order_status_jiedan.png'),  
     require('./imgs/ic_order_status_peisong.png'),
     require('./imgs/ic_order_status_wancheng.png')
];
var {height, width} = Dimensions.get('window');

class TimeLineDemo extends React.Component {
  constructor(props) {
    super(props);
    this.renderItem = this.renderItem.bind(this); 
    this.state={
         dataSource: new ListView.DataSource({
           rowHasChanged: (row1, row2) => row1 !== row2,
         }),
         orderStatuts : ORDER_STATUS_DATA.data,
      }
  } 
  //进行渲染数据
  renderContent(dataSource) {
    return (
      
    );
   }
  //渲染每一项的数据
  renderItem(data) {
    if(data.id === 0){
       return ( this.renderHeaderItem(data));
    }else if(data.id === 4){
       return (this.renderFooterItem(data));
    }else{
       return (this.renderCenterItem(data));
    }
  } 
  renderHeaderItem(data){
    return (
      
          
              
              
          
          
              
              
                      {this.renderCenterContent(data)}
              
              
          
      
    );
  }
  renderCenterItem(data){
    return (
      
          
              
              
              
          
          
              
              
                      {this.renderCenterContent(data)}
              
              
          
      
    );
  }
  renderFooterItem(data){
    return (
      
          
              
              
          
          
              
              
                     {this.renderCenterContent(data)}
              
              
          
      
    );
  }
  renderCenterContent(data){
    return (
       
              
                      {data.status}
                      {data.time}
                      
                      {data.remark}
      
    );
  }
  render() {
    return (
        
              {this.renderContent(this.state.dataSource.cloneWithRows(
                         this.state.orderStatuts === undefined ? [] : this.state.orderStatuts))}
        
    );
  }
}
AppRegistry.registerComponent('TimeLineDemo', () => TimeLineDemo);

3.2.第二种实现方法，也是采用Listview，不过是使用给ListView添加header和footer布局实现，listview添加中间三项即可，来看一下代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  Image,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ListView,
} from 'react-native';
const ORDER_STATUS_DATA={
      "api":"GetSearchHistory",
    "v":"1.0",
    "code":"0",
    "msg":"success",
    "data":[{
        "id":0,
        "status":"订单已提交",
        "remark":"请耐心等待商家确认",
        "time":"8月5日 18:13"
    },{
        "id":1,
        "status":"支付成功",
        "remark":"",
        "time":"8月5日 18:15"
    },{
        "id":2,
        "status":"商家已接单",
        "remark":"商品准备中,由商家配送,配送进度请咨询商家",
        "time":"8月5日 18:20"
    },{
         "id":3,
        "status":"配送进行中",
        "remark":"你的商品正由XX配送员火速送达中...",
        "time":"8月5日 18:25"
    },{
         "id":4,
        "status":"订单完成",
        "remark":"任何意见和吐槽,都欢迎联系我们",
        "time":"8月5日 18:34"
    }]
};
var STATUS_IMGS=[
     require('./imgs/ic_order_status_tijiao.png'),  
     require('./imgs/ic_order_status_zhifu.png'),  
     require('./imgs/ic_order_status_jiedan.png'),  
     require('./imgs/ic_order_status_peisong.png'),
     require('./imgs/ic_order_status_wancheng.png')
];
var {height, width} = Dimensions.get('window');
var orderStatuts = ORDER_STATUS_DATA.data;
var HEADER_STATUS = orderStatuts[0];
var FOOTER_STATUS = orderStatuts[orderStatuts.length-1];
var CENTER_STATUS = orderStatuts.slice(1,orderStatuts.length-1);
class TimeLineDemo extends React.Component {
  constructor(props) {
    super(props);
    this.renderItem = this.renderItem.bind(this); 
    this.renderHeaderItem = this.renderHeaderItem.bind(this); 
    this.renderFooterItem = this.renderFooterItem.bind(this); 
    this.state={
         dataSource: new ListView.DataSource({
           rowHasChanged: (row1, row2) => row1 !== row2,
         }),

      }
  } 
  //进行渲染数据
  renderContent(dataSource) {
    return (
      
    );
   }
  //渲染每一项的数据
  renderItem(data) {
     if(data.id > 0 && data.id < 4 ){
       return (this.renderCenterItem(data));
     }
  } 
  renderHeaderItem(){
    return (
      
          
              
              
          
          
              
              
                      {this.renderCenterContent(HEADER_STATUS)}
              
              
          
      
    );
  }
  renderCenterItem(data){
    return (
      
          
              
              
              
          
          
              
              
                      {this.renderCenterContent(data)}
              
              
          
      
    );
  }
  renderFooterItem(){
    return (
      
          
              
              
          
          
              
              
                     {this.renderCenterContent(FOOTER_STATUS)}
              
              
          
      
    );
  }
  renderCenterContent(data){
    return (
       
              
                      {data.status}
                      {data.time}
                      
                      {data.remark}
      
    );
  }
  render() {
    return (
        
              {this.renderContent(this.state.dataSource.cloneWithRows(
                         CENTER_STATUS === undefined ? [] : CENTER_STATUS))}
        
    );
  }
}
AppRegistry.registerComponent('TimeLineDemo', () => TimeLineDemo);
(四)最后总结

今天带着大家实现了一下订单状态的时间轴的效果，具体实例代码可以在项目中进行查看。项目地址:github.com/jiangqqlmj/…

刚创建的React Native交流八群:533435865,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

查看图片

关注我的微博，可以获得更多精彩内容

avatar
文章
阅读
粉丝