Question

我有一个顶部标签导航器“ Segment”，并且scrollView包含两个组件，

当我向左滑动时或当按下以单击导航器标题时，滚动到下一个视图，基于我从Map（）获得的当前索引。

现在，当我进入“关闭的标签页”并再次单击以关闭时，它会将我导航到下一个视图。

如何防止这种情况？如果我仍然处于“关闭”状态，然后再次单击它，只是不要将我导航到下一个视图并且仍然在该视图上？

代码

const {width, height} = Dimensions.get('window');
const Tabs = [
  {
    name: 'opened',
  },
  {
    name: 'closed',
  },
];
const AppointmentScreen = () => {
  const scrollRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <View style={styles.boxHeaderContainer}>
          <Text style={styles.headerText}>
            Hello
          </Text>
        </View>
        <View style={styles.boxHeaderContainer}>
          <HeaderAppointments />
        </View>
      </View>
      <View style={styles.appointmentsContainer}>
        {Tabs.map(({name}, tabIndex) => (
          <TouchableOpacity
            key={tabIndex}
            onPress={() => {
              // Works for Android well!
              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);
              }
              //   if (tabIndex === 0) {
              //     setCurrentIndex(tabIndex === 0 ? 1 : 0);
              //     scrollRef.current.scrollTo({
              //       x: width,
              //       animated: true,
              //     });
              //   }
              //   if (tabIndex === 1) {
              //     setCurrentIndex(tabIndex === 0 ? 1 : 0);
              //     scrollRef.current.scrollTo({
              //       x: width * (tabIndex - 1),
              //       animated: true,
              //     });
              //   }
            }}
            delayPressIn={0}
            style={[
              styles.appointmentsBox,
              {
                backgroundColor: tabIndex === currentIndex ? '#000' : '#fff',
              },
            ]}>
            <Text
              style={[
                styles.appointmentText,
                {
                  color: tabIndex === currentIndex ? '#fff' : '#000',
                },
              ]}>
              {name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View
        style={{
          height,
        }}>
        <Animated.ScrollView
          ref={scrollRef}
          showsHorizontalScrollIndicator={false}
          bounces={false}
          decelerationRate="fast"
          snapToInterval={width}
          scrollEventThrottle={1}
          onMomentumScrollEnd={() => {
            if (scrollRef.current) {
              setCurrentIndex(currentIndex === 0 ? 1 : 0);
            }
          }}
          horizontal>
          <OpenedAppointments />
          <ClosedAppointments />
        </Animated.ScrollView>
      </View>
    </View>
  );
};

export default AppointmentScreen;

Answer 1

我认为您可以在细分的onPress中添加条件以防止该操作：

if(tabIndex === segmentIndex){
    return;
}

如何防止ScrollTo在特定状态下发生本机反应？

1 个答案: