当用户单击后退箭头图像按钮时,进度条指示器不会在本机反应中减少
When user will click on back arrow image button progress bar indicator is not decrease in react native
我想实现这个功能当用户点击后退箭头图像按钮时,进度条指示器会减少,并且会在轮播中显示之前的问题。
我正在使用 'react-native-snap-carousel' 来显示问题和答案的数据,并使用 'react-native-progress-bar-animated' 在 react-native 中显示进度条指示器。
请帮助我如何实现这个 functionality.I 是 react 的新手 - native.Thank 你是高级的。
这里放一些代码方便理解
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>
我对SnapToItem做了一些改动,增加和减少了一些功能,
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%')}
/>
这应该有效。
我想实现这个功能当用户点击后退箭头图像按钮时,进度条指示器会减少,并且会在轮播中显示之前的问题。
我正在使用 'react-native-snap-carousel' 来显示问题和答案的数据,并使用 'react-native-progress-bar-animated' 在 react-native 中显示进度条指示器。
请帮助我如何实现这个 functionality.I 是 react 的新手 - native.Thank 你是高级的。
这里放一些代码方便理解
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>
我对SnapToItem做了一些改动,增加和减少了一些功能,
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%')}
/>
这应该有效。