20.React Native动画效果实例系列三-条形进度条-兼容IOS和Android；

目录

 

1.实现多平台支持进度条-纯JS

1.1进度条代码

1.2进度条使用示例

1.3效果图

---

1.实现多平台支持进度条-纯JS

1.1进度条代码

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

/**
 * 实现横向进度条
 */
export default class ProgressBar extends Component{
    constructor(props){
        super(props);
        /*
         * 初始化动画初始值
         * this.props.progress：父界面传拿过来的progress属性值做为初始值
         */
        this.animation = new Animated.Value(this.props.progress);
    }

    /**
     * 当页面发生更新时会立即调用componentDidUpdate
     * 次方法不要作状态更新，否则会出现死循环
     * @param prevProps 旧的属性
     * @param prevState 旧的状态
     */
    componentDidUpdate(prevProps, prevState) {
        //比较上次的进度值是否和当你值一致
        if(prevProps.progress !== this.props.progress){
            //定义动画，推动