直接上代码
封装进度条组件
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>