左右滚动时隐藏和显示 React-Native

Question

0. 在React Native中，我试图创建一个具有左右箭头的扁平列表水平，我希望在按右侧或向左的侧面或左侧，直到条件，在按下它保持不可见的情况下，可以看到箭头。 更改
1. 我希望左箭头的
2. 在默认情况下是不可见的，当按右箭头时，右箭头应在左箭头变为可见时不可见，反之亦然，
3. 但是如果按两到三倍，则不应该看到相同的箭头

  const leftScrollHandler = () => {
    listViewRef.scrollToOffset({ offset: 0.5, animated: true });
  };

  const rightScrollHandler = () => {
    //OnCLick of right button we scrolled the list to bottom
    listViewRef.scrollToEnd({ animated: true });
  };
  // this below is for scroller to apear and disapear funtionality

  const [backgroundColor, setBackgroundColor] = useState("transparent");
  const [backgroundColor2, setBackgroundColor2] = useState(colors.secondary);
  const [pressed, setPressed] = useState(false);
  function changeColor() {
    if (!pressed) {
      setPressed(true);
      setBackgroundColor(colors.secondary);
      setBackgroundColor2("transparent");
    } else {
      setPressed(false);
      setBackgroundColor2(colors.secondary);
      setBackgroundColor("transparent");
    }
  }

 <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        data={Data}
        keyExtractor={(item, index) => [item.id, index.toString()]}
        renderItem={renderItem}
        ref={(ref) => {
          listViewRef = ref;
        }}
      />
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => {
          changeColor();
          leftScrollHandler();
        }}
        style={
          (web && isTablet) || isDesktop
            ? styles.leftScrollDesktop
            : styles.leftScroll
        } >
        <AntDesign
          style={styles.leftArrow}
          name="arrowleft"
          size={(web && isTablet) || isDesktop ? 50 : 35}
          color={backgroundColor}
        />
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => {
          changeColor();
          rightScrollHandler();
        }}
        style={
          (web && isTablet) || isDesktop
            ? styles.rightScrollDesktop
            : styles.rightScroll
        }
      >
        <AntDesign
          style={styles.rightArrow}
          name="arrowright"
          size={(web && isTablet) || isDesktop ? 50 : 35}
          color={backgroundColor2}
        />
      </TouchableOpacity>