0

我想实现这个功能当用户点击后退箭头图像按钮时，进度条指示器会减少，它会在轮播中显示以前的问题。

我正在使用“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>
4

1 回答 1

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);
    })
}

increase = () => {
    this.carousel.snapToItem(this.state.indexvalue + 1)
}
decrease = () => {
    this.carousel.snapToItem(this.state.indexvalue - 1)
}

并为您的进度条动画添加最大值

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

这应该有效。

于 2020-04-29T10:01:09.813 回答