如何使用嵌套滚动视图（如 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>