如何解决基于比较下一个状态和上一个钩子来更新状态?
我有“拖曳”选项卡,基于下一个/上一个视图的滑动而激活,
我的刷卡不可接受, 当我滑动到下一个视图时,我将更新索引以激活下一个选项卡,并且效果很好,
但是,如果我在标签0中并且两次滑动到下一个时,我遇到了意外的行为,它将激活上一个标签
如果我在Tab 0中并两次滑动到下一个,我希望我只想激活Tab 0,以此类推,
因此,在onScrollEndDrag
中,如果当前活动标签为0,我会更新标签索引,否则更新为1,否则更新为0
但是当我得到以前的状态并与当前状态进行比较时,效果不佳,或者我认为它很糟糕。
我不知道我希望用户如何刷卡,所以我不知道如何获得下一个状态:\
我希望任何人都能理解我在这种情况下的确切含义。
请GIF在这里检查一下!
代码段
const Tabs = [
{
name: 'opened',},{
name: 'closed',];
const AppointmentScreen = () => {
const scrollRef = useRef(null);
const [currentIndex,setCurrentIndex] = useState(0);
return (
<View style={styles.appointmentsTabs}>
{Tabs.map(({ name },tabIndex) => (
<TouchableOpacity
key={tabIndex}
onPress={() => {
if (tabIndex === currentIndex) {
return;
}
if (scrollRef.current) {
scrollRef.current.scrollTo({
x: tabIndex === 0 ? width : width * (tabIndex - 1),y: 0,animated: true,});
setCurrentIndex(currentIndex === 1 ? 0 : 1);
}
}}
delayPressIn={0}
style={[
styles.appointmentsBox,{
backgroundColor: tabIndex === currentIndex ? '#000' : '#fff',]}>
<Text
style={[
styles.appointmentText,{
color: tabIndex === currentIndex ? '#fff' : '#000',]}>
{name}
</Text>
</TouchableOpacity>
))}
</View>
<Animated.ScrollView
ref={scrollRef}
showsHorizontalScrollIndicator={false}
bounces={false}
decelerationRate="fast"
snapToInterval={width}
onScrollEndDrag={() => {
if (scrollRef.current) {
setCurrentIndex((prevState) => {
console.log('prevState: ',prevState);
console.log('currentIndex: ',currentIndex);
return prevState === 0 ? 1 : 0;
});
}
}}
horizontal>
<OpenedAppointments />
<ClosedAppointments />
</Animated.ScrollView>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。