React native 在react native中实现多个Progress.bar

我想实现WhatsApp故事效果，顶部进度条的数量等于故事的数量

我正在使用react native progress/bar library来实现这一效果，但我正在寻找一种方法，在第一个进度条结束时如何运行第二个进度条。 实际上，progress.bar的进度随状态的变化而变化。 通过使用单一状态来实现这一点的有效方法是什么

以下是代码：

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

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


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 300,
    height: 200,
  },
});

export default class Example extends Component {

  componentDidMount() {
    this.animate();
  }

  constructor(props) {
    super(props);
    this.state = {
      progress: 0
    };
  }

  animate() {
    let progress = 0;
    this.setState({ progress });
    let myInterval = setInterval(() => {
      if (progress > 1) {
        progress = 1;
        clearInterval(myInterval);
      } else {
        progress += 0.01;
      }
      this.setState({ progress });
    }, 20)
  }

  render() {
    return (
      <View style={styles.container}>
       <View style={{flexDirection:'row'}} >
        <Progress.Bar
          key={'0'}
          style={styles.progress}
          progress={this.state.progress}
          indeterminate={false}
        />
        <Progress.Bar
          key={'1'}
          style={styles.progress}
          progress={this.state.progress}
          indeterminate={false}
        />
       </View>
      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{StyleSheet，TouchableOpacity，View}；
将*作为进度从“反应本机进度”导入；
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
图片：{
宽度：300，
身高：200，
},
});
导出默认类示例扩展组件{
componentDidMount（）{
这个。动画（）；
}
建造师（道具）{
超级（道具）；
此.state={
进展：0
};
}
制作动画（）{
让进度=0；
this.setState（{progress}）；
让myInterval=setInterval（（）=>{
如果（进度>1）{
进展=1；
clearInterval（myInterval）；
}否则{
进度+=0.01；
}
this.setState（{progress}）；
}, 20)
}
render（）{
返回(
);
}
}

Hi@Qasim Idrees，您使用了

highcharts

标记，但问题似乎与highcharts无关。实际上，我没有得到任何回应。我需要紧急帮助，我没有得到更多相关的tagsHi@Qasim Idrees，您使用了

highcharts

tag，但问题似乎与highcharts无关。实际上我没有得到任何回应。我需要紧急帮助，我没有得到更多的相关标签