react-native - 当用户单击后退箭头图像按钮时,进度条指示器在本机反应中不会减少
问题描述
我想实现这个功能当用户点击后退箭头图像按钮时,进度条指示器会减少,它会在轮播中显示以前的问题。
我正在使用“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>
解决方案
我改变了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%')}
/>
这应该有效。
推荐阅读
- visual-studio - Visual Studio 备份文件夹为空
- openj9 - 适用于 DST 2019 巴西的 Openj9 版本
- css - 覆盖 Material-ui 样式
- jquery - 如何使用下拉菜单更改 youtube 播放列表 ID
- javascript - 在数组元素之间切换 React
- android-architecture-components - 如何使用 jetpack 导航库在两个活动之间导航
- java - 如何确定 Java 应用程序是基于 Spring 或 Spring Boot 或 Spring MVC 构建的
- javascript - 带有 Express 和 React 的 Socket.io
- android - Android 应用无法连接到互联网
- python - 只访问一次产生的变量