如何在React Native中开发实现参考截图所示的时间轴组件

实现思路 #

• 整体用FlatList实现垂直列表布局，每个时间节点对应一个列表Item，性能表现更好
• 单个Item拆分为左右两栏：左侧为时间轴轨道+节点标识区域，右侧为内容展示区域
• 时间轴竖线根据Item位置做适配：首项仅展示节点下方竖线，末项仅展示节点上方竖线，中间项上下都展示
• 节点状态可通过样式区分：已完成节点填充高亮色，进行中节点填充强调色，未完成节点用灰色边框即可

核心实现代码 #

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

// 模拟时间轴数据，可根据业务替换为接口返回值
const timelineData = [
  { id: '1', title: '订单提交', time: '2024-05-20 10:00', status: 'done' },
  { id: '2', title: '商家接单', time: '2024-05-20 10:05', status: 'done' },
  { id: '3', title: '骑手取餐', time: '2024-05-20 10:20', status: 'active' },
  { id: '4', title: '配送完成', time: '待完成', status: 'pending' },
];

const TimelineItem = ({ item, index, total }) => {
  return (
    <View style={styles.itemContainer}>
      {/* 左侧时间轴区域 */}
      <View style={styles.timelineCol}>
        {/* 上半段轨道线：首项不展示 */}
        {index !== 0 && <View style={[styles.trackLine, item.status === 'done' ? styles.doneLine : styles.pendingLine]} />}
        {/* 节点标识 */}
        <View style={[
          styles.node,
          item.status === 'done' ? styles.doneNode : item.status === 'active' ? styles.activeNode : styles.pendingNode
        ]}>
          {item.status === 'done' && <Text style={styles.nodeText}>✓</Text>}
        </View>
        {/* 下半段轨道线：末项不展示 */}
        {index !== total - 1 && <View style={[styles.trackLine, item.status === 'done' || item.status === 'active' ? styles.doneLine : styles.pendingLine]} />}
      </View>
      {/* 右侧内容区域 */}
      <View style={styles.contentCol}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.time}>{item.time}</Text>
      </View>
    </View>
  )
}

const Timeline = () => {
  return (
    <FlatList
      data={timelineData}
      renderItem={({item, index}) => <TimelineItem item={item} index={index} total={timelineData.length} />}
      keyExtractor={item => item.id}
      style={styles.container}
    />
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingVertical: 20,
  },
  itemContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  timelineCol: {
    width: 24,
    alignItems: 'center',
    marginRight: 12,
  },
  trackLine: {
    width: 2,
    height: 16,
  },
  doneLine: {
    backgroundColor: '#27ae60',
  },
  pendingLine: {
    backgroundColor: '#bdc3c7',
  },
  node: {
    width: 20,
    height: 20,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  doneNode: {
    backgroundColor: '#27ae60',
  },
  activeNode: {
    backgroundColor: '#f39c12',
  },
  pendingNode: {
    backgroundColor: '#fff',
    borderWidth: 2,
    borderColor: '#bdc3c7',
  },
  nodeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  contentCol: {
    flex: 1,
    paddingTop: 2,
  },
  title: {
    fontSize: 15,
    color: '#333',
    fontWeight: '500',
    marginBottom: 4,
  },
  time: {
    fontSize: 12,
    color: '#666',
  }
})

export default Timeline;

自定义调整方案 #

• 可以根据设计稿修改节点形状、轨道颜色、内容排版，也可扩展添加卡片、图标等装饰元素
• 需要左右交错布局的时间轴时，判断Item的奇偶值，调整时间轴栏和内容栏的排列顺序即可
• 如果需要实现时间轴吸顶、节点高亮等交互效果，可结合Animated动画库和FlatList的滚动监听事件实现

内容的提问来源于stack exchange，提问作者realsajeel289