基于比较下一个状态和上一个钩子来更新状态？

问题描述

我有“拖曳”选项卡，基于下一个/上一个视图的滑动而激活，

我的刷卡不可接受， 当我滑动到下一个视图时，我将更新索引以激活下一个选项卡，并且效果很好，

但是，如果我在标签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>
);
}

Demo

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）