Question

我想要实现类似WhatsApp的故事效果，其中顶部的进度条数等于故事数。

我正在使用react-native-progress / bar库来实现这种效果，但是我正在寻找一种方法，当第一次结束时如何运行第二个进度条。实际上，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>
    );
  }
}

在本机中实现多个Progress.bar

0 个答案: