如何使用嵌套滾動視圖（如 twitter 或 instagram 配置文件屏幕 [REACT-NATIVE]）創建粘性選項卡選擇器

Question

我正在嘗試創建一個包含一個粘性選擇器的 ScrollView，它允許在兩個嵌套的 ScollViews 之間進行選擇。 就像 twitter 個人資料屏幕或 instagram 屏幕一樣，您可以在我的帖子和我被標記的帖子之間切換。 現在我的問題實際上是這兩個嵌套的 ScollViews，假設“MY POSTS”和“TAGGED”可能有不同的大小，但是 RootScrollView 只考慮兩個滾動視圖的最大高度，所以如果在第一個我有 20 個項目，假設高度 = 1000，如果我沒有物品或更少的物品，我將有一個空白空間 y 偏移量，就像第一個一樣。

我知道這不是很清楚，但是如果你打開 instagram 或 twitter 個人資料屏幕你會立即得到它，不同高度的問題。

現在您將看到，我嘗試創建一個 RootScrollView，在其中放入兩個視圖，header 和粘性選擇器，在 twitter 中，它是“推文”、“推文和回復”......最初具有scrollEnabled = false的NestedScrollView，然后，通過滾動根，我將其更新為true並將根更新為false。 但它似乎無法正常工作。

這是代碼：

const HEADER_HEIGHT = height / 3;
const STIKY_SELECTOR_HEIGHT = 100;

const App = () => {
  const rootScrollRef = useRef();
  const nestedScrollRef = useRef();

  const [offset, setOffset] = useState(0);
  const [scrollEnabled, setScrollEnabled] = useState(false);

  const onRootScroll = ({
    nativeEvent: {
      contentOffset: { y },
    },
  }) => {
    const direction = y > offset ? "down" : "up";
    setOffset(y);

    if (y > HEADER_HEIGHT - 10 && direction == "down") {
      setScrollEnabled(true);
    }
  };

  const onNestedScroll = ({
    nativeEvent: {
      contentOffset: { y },
    },
  }) => {
    if (y < 20) setScrollEnabled(false);
  };

  const renderItem = () => {
    return <View style={styles.cell} />;
  };

  return (
    <View style={{ flex: 1 }}>
      {/* ROOT SCROLLVIEW */}

      <ScrollView
        simultaneousHandlers={nestedScrollRef}
        scrollEventThrottle={16}
        ref={rootScrollRef}
        onScroll={onRootScroll}
        stickyHeaderIndices={[1]}
        scrollEnabled={!scrollEnabled}
        style={{ flex: 1, backgroundColor: "gray" }}
      >
        {/* HEADER */}

        <View
          style={{ width, height: HEADER_HEIGHT, backgroundColor: "darkblue" }}
        ></View>

        {/* STIKY SELECTOR VIEW */}
        <View
          style={{ height: STIKY_SELECTOR_HEIGHT, backgroundColor: "red" }}
        ></View>

        {/* NESTED SCROLLVIEW */}

        <View style={{ height: height - STIKY_SELECTOR_HEIGHT }}>
          <FlatList
            data={[1, 2, 3, 4, 5, 6, 7]}
            ref={nestedScrollRef}
            scrollEventThrottle={16}
            onScroll={onNestedScroll}
            scrollEnabled={scrollEnabled}
            renderItem={renderItem}
            numColumns={2}
            contentContainerStyle={{
              justifyContent: "space-between",
            }}
          />
        </View>
      </ScrollView>
    </View>
  );
};

Answer 1

如果有人面臨同樣的問題，那么該react-native-collapsible-tab-view的組件

<Tabs.Container
  renderHeader={Header}
  headerHeight={HEADER_HEIGHT} // optional>
  <Tabs.Tab name="A">
    <Tabs.FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={identity}
    />
  </Tabs.Tab>
  <Tabs.Tab name="B">
    <Tabs.ScrollView>
      <View style={[styles.box, styles.boxA]} />
      <View style={[styles.box, styles.boxB]} />
    </Tabs.ScrollView>
  </Tabs.Tab>
</Tabs.Container>