Question

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

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

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

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

0 个答案: