React Native自定义四类固定进度展示的进度条UI实现求助

核心思路 #

不用依赖第三方库，直接用React Native基础组件就能搞定：

• 用横向flex布局的View做进度条容器，每个分类对应一个子View，通过width属性设置百分比控制占比
• 用borderRadius+overflow: hidden实现圆角进度条效果
• 所有组件都是React Native原生跨平台组件，天然适配Android和iOS

完整代码实现 #

先写一个可复用的自定义组件：

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

const MultiProgressBar = ({ categories }) => {
  return (
    <View style={styles.container}>
      {/* 进度条主体 */}
      <View style={styles.progressWrapper}>
        {categories.map((item, idx) => (
          <View
            key={idx}
            style={[
              styles.progressSegment,
              {
                width: `${item.percent}%`,
                backgroundColor: item.color,
              },
            ]}
          />
        ))}
      </View>
      {/* 分类标签（可选） */}
      <View style={styles.labelsRow}>
        {categories.map((item, idx) => (
          <View key={idx} style={styles.labelItem}>
            <View style={[styles.colorDot, { backgroundColor: item.color }]} />
            <Text style={styles.labelText}>{item.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  progressWrapper: {
    flexDirection: 'row',
    height: 22,
    borderRadius: 11,
    overflow: 'hidden',
    backgroundColor: '#eaeaea', // 进度条底色
  },
  progressSegment: {
    height: '100%',
  },
  labelsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 6,
  },
  labelItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  colorDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginRight: 4,
  },
  labelText: {
    fontSize: 12,
    color: '#333',
  },
});

export default MultiProgressBar;

使用方式 #

在你的页面组件中引入并传入分类数据（注意：所有分类的百分比总和必须为100%）：

import MultiProgressBar from './MultiProgressBar';

// 自定义你的分类数据
const progressCategories = [
  { name: '已完成', percent: 25, color: '#2ecc71' },
  { name: '进行中', percent: 35, color: '#3498db' },
  { name: '待开始', percent: 20, color: '#f1c40f' },
  { name: '已延期', percent: 20, color: '#e74c3c' },
];

// 在render函数中使用
<MultiProgressBar categories={progressCategories} />

注意事项 #

• 确保所有分类的percent总和为100%，避免进度条显示异常
• 如果不需要分类标签，直接删除labelsRow相关代码即可
• 样式中的颜色、高度、圆角大小都可以根据需求调整，适配你的UI设计

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