Когда пользователь нажимает на кнопку со стрелкой назад, изображение индикатора выполнения не уменьшается в реакции родного

Question

Я хочу добиться этой функциональности. Когда пользователь нажмет на кнопку со стрелкой назад, изображение индикатора выполнения будет уменьшаться, и он покажет предыдущие вопросы в карусели.

Я использую «реагировать-родной-оснастка- Карусель »для отображения данных вопроса и ответа и« реакция-родной-прогресс-бар-анимированный »для отображения индикатора выполнения в реактив-родной.

Пожалуйста, помогите мне, как я могу достичь этой функциональности. Я новичок в реакции-родной. Спасибо в продвинутом.

Вот код, который легко понять

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

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%')}
/>

Это должно работать.