当用户单击后退箭头图像按钮时，进度条指示器在本机响应中不会减少

Question

我想实现此功能，当用户单击后退箭头图像按钮时，进度条指示器将减少，并且将在轮播中显示先前的问题。

我正在使用'react-native-snap-carousel'来显示问题和答案的数据，并使用'react-native-progress-bar-animated'来显示react-native的进度条指示器。

[请帮助我如何实现此功能。我是react-native的新手。谢谢您。

这里有一些代码易于理解

 onSnapToItem = (index) => {
            console.log("get indexvalue", index);

            if (index > 0) {

                let progress = this.state.progress + 100 / this.state.questionList.length
                console.log("my progress qsn length", progress, this.state.questionList.length)
                this.setState({ indexvalue: index, progress: progress }, () => {
                    console.log("check progresss index", this.state.progress, index);
                })
            }

        }

        increase = (value) => {
            this.setState({
                [value]: this.state[value] + value,
            });
             this.carousel._snapToItem(this.state.indexvalue + 1)

        }
        decrease = (value) => {
            this.setState({
                [value]: this.state[value] + value,
            });
            this.carousel._snapToItem(this.state.indexvalue - 1)

        }


     <View style={styles.container}>
                    <View style={styles.topView}>
                        <TouchableOpacity onPress={() => { this.decrease(this.state.progress) }}>
                            <Image source={require('./../../Images/left-arrow-red.png')} style={styles.topImage} />
                        </TouchableOpacity>
                        <TouchableHighlight style={{ marginTop: hp('1.5%') }}>
                            <ProgressBarAnimated
                                width={wp('70%')}
                                value={this.state.progress}
                                // maxValue={100}
                                onComplete={() => {
                                    this.props.navigation.navigate('EditprofileScreen')
                                }}
                                height={hp('0.6%')}

                            />
                        </TouchableHighlight>

                        <TouchableOpacity onPress={() => { this.props.navigation.goBack() }}>
                            <Image source={require('./../../Images/closescreen.png')} style={styles.topImage1} />
                        </TouchableOpacity>
                    </View>

                    <Carousel
                        data={questionList}
                        renderItem={this.renderItemQuestion}
                        itemWidth={wp('100%')}
                        sliderWidth={wp('100%')}
                        ref={ref => this.carousel = ref}
                        scrollEnabled={false}
                        onSnapToItem={this.onSnapToItem}
                        extraData={this.state.indexvalue}

                    />

                    <TouchableOpacity onPress={() => this.increase(this.state.progress)}><Text style={styles.skiptext}>Skip</Text></TouchableOpacity>
                </View>

Answer 1

我对onSnapToItem函数做了一些改动，

onSnapToItem = (index) => {
    let progress = (index === (this.state.questionList.length-1)) ? 100 : ((index+1) * (100/this.state.questionList.length));
    this.setState({ indexvalue: index, progress: progress }, () => {
        console.log("check progresss index", this.state.progress, index);
    })
}

并将最大值添加到动画的进度栏中

<ProgressBarAnimated
    width={wp('70%')}
    value={this.state.progress}
    maxValue={100}
    onComplete={() => {
        this.props.navigation.navigate('EditprofileScreen')
    }}
    height={hp('0.6%')}
/>

这应该工作。