React Native 自定义ProgressBar(双平台)

最新推荐文章于 2024-08-09 07:18:16 发布

vv_小虫

最新推荐文章于 2024-08-09 07:18:16 发布

阅读量8.7k

点赞数 2

分类专栏： RN学习笔记

本文链接：https://blog.csdn.net/vv_bug/article/details/61195562

版权

在项目中遇到React Native的ProgressBarAndroid的indeterminate属性警告，作者决定自定义一个ProgressBar。通过创建CusProgressBar.js组件，接收外部props并利用Animated.View动态控制宽度实现进度条效果。文章介绍了详细实现步骤，包括获取父布局高度、执行动画以及如何动态更新进度。提供了完整的代码示例和使用方法。

摘要由CSDN通过智能技术生成

前言：这些天项目不是很紧，所以比较闲，然后就胡思乱想，居然还想去学校读书，有种想去考研的冲动了哈～～唉唉！又总感觉自己满腔热血想在这大城市闯出自己一片天地，但是又有心无力，尼玛～唯有撸代码才能平复我那不安的小内心啊～废话不多说了，赶紧进入我们今天的主题

项目中用到了progressBar,虽然说rn有ProgressBarAndroid跟ProgressViewIOS，但是当我用到ProgressBarAndroid的时候就会报一个啥“indeterminate属性已经过时的警告“，但是我需要用到水平的progressbar必须把indeterminate设置为false，在这种尴尬的场景下，我觉得有必要自定义一个progressbar。

先看看效果图：

这里写图片描述

嗯嗯～效果还是很不错的，让我们来实现一下吧..

首先，我们创建一个js文件叫CusProgressBar.js,然后定义一些我们需要传递的参数：

export default class CusProgressBar extends Component {
   
    static propTypes = {
        ...View.propTypes,
        //当前进度
        progress: PropTypes.number,
        //second progress进度
        buffer: PropTypes.number,
        //进度条颜色
        progressColor: PropTypes.string,
        //buffer进度条颜色
        bufferColor: PropTypes.string,
        //进度动画时长
        progressAniDuration: PropTypes.number,
        //buffer动画时长
        bufferAniDuration: PropTypes.number
    }
    static defaultProps = {
        //进度条颜色
        progressColor: 'white',
        //buffer进度条颜色
        bufferColor: 'rgba(255,0,0,0.7)',
        //进度条动画时长
        progressAniDuration: 300,
        //buffer进度条动画时长
        bufferAniDuration: 300
    }
    // 构造，定义两个动画
    constructor(props) {
        super(props);
        this._progressAni = new Animated.Value(0);
        this._bufferAni = new Animated.Value(0);
    }
  ｝

然后当我们的自定义view收到外面传递的props的时候把当前进度跟buffer进度赋给类成员变量_progress跟_buffer：

componentWillReceiveProps(nextProps) {
        this._progress = nextProps.progress;
        this._buffer = nextProps.buffer;
    }

    componentWillMount() {
        this._progress = this.props.progress;
        this._buffer = this.props.buffer;
    }

拿到外界传递的属性值，然后就是我们的核心代码render方法了：

render() {
        return (
            <View
                style={[styles.container,this.props.style]}
                onLayout={this._onLayout.bind(this)}
            >
                <Animated.View
                    ref="progress"
                    style={
   {
                        position:'absolute',
                        width:this._progressAni,
                        backgroundColor:this.props.progressColor
                    }}
                />
                <Animated.View
                    ref="buffer"
                    style={
   {
                        p