react-native-progress进度条

$ npm install react-native-progress --save


属性

animated    是否动画更改progress

indeterminate    如果设置为true,则指示符将旋转,progressprop将被忽略。

progress 无论指标表明什么进展。介于0和1之间的数字。

color   填充指标的颜色。 rgba(0, 122, 255, 1)

unfilledColor  剩余进度的颜色。

borderWidth  外边框的宽度,设置为0要删除。 

borderColor  外边框的颜色。


import * as Progress from 'react-native-progress';

<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />

export default class Example extends Component {
  constructor(props) {
    super(props);


    this.state = {
      progress: 0,
      indeterminate: true,
    };
  }


  componentDidMount() {
    this.animate();
  }


  animate() {
    let progress = 0;
    this.setState({ progress });
    setTimeout(() => {
      this.setState({ indeterminate: false });
      setInterval(() => {
        progress += Math.random() / 5;
        if (progress > 1) {
          progress = 1;
        }
        this.setState({ progress });
      }, 500);
    }, 1500);
  }


日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容