React Native 条形进度条

封装进度条组件

import React from 'react';
import { View, StyleSheet } from 'react-native';
 
const ProgressBar = ({ progress, height, barColor, fillColor }) => {
    const progressWidth = `${progress * 100}%`;
 
    return (
        <View style={[styles.progressBar, { height }]}>
            <View style={[styles.progressFill, { width: progressWidth, backgroundColor: fillColor }]} />
            <View style={[styles.progressBarBackground, { backgroundColor: barColor }]} />
        </View>
    );
};
 
const styles = StyleSheet.create({
    progressBar: {
        flexDirection: 'row',
        overflow: 'hidden',
        borderRadius: 5,
        width:'100%',
    },
    progressFill: {
 
    },
    progressBarBackground: {
        width: '100%',
    },
});
 
export default ProgressBar;

在页面引入过后直接使用

<View style={styles.containers}>
     {/* 
         progress：进度百分比 0-1
         height：高
         barColor：进度条背景色
         fillColor：进度背景色
     */}  
    <ProgressBar progress={Progress} height={3} barColor="#ccc" fillColor="#2892FD" />
</View>