滚动时消失的标题并在 react-native 中不再滚动时出现

Question

我有一个平面列表，当我滚动以消失我拥有的标题以及停止滚动以显示标题时，我想要。我几乎让它工作，但造型并不好。这是我的实现：

主屏幕（ExploreScreen）：

const HEADER_HEIGHT = 250;


const scrollY = new Animated.Value(0);
const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
const translateY = diffClamp.interpolate({
  inputRange: [0, HEADER_HEIGHT],
  outputRange: [0, -HEADER_HEIGHT],
});

...
return (
   <Animated.View
      style={{
        transform: [{translateY: translateY}],
        elevation: 4,
        zIndex: 100,
      }}>
      <ExploreHeader
        theme={theme}
        isDark={isDark}
        categories={categories}
        handleCategoryClick={handleCategoryClick}
        selectedCategory={selectedCategory}
        contentLoading={contentLoading}
        queries={queries}
        selectedQuery={selectedQuery}
        handleQueryClick={handleQueryClick}
      />
    </Animated.View>

    <ExploreData
        selectedCategory={selectedCategory}
        onRefresh={onRefresh}
        recipes={recipes}
        contentLoading={contentLoading}
        refreshing={refreshing}
        updateUser={updateUser}
        scrollY={scrollY}
      />

_

在 exploreHeader 样式中：

exploreHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 250,
    borderBottomLeftRadius: 25,
    borderBottomRightRadius: 25,
    paddingBottom: wp(4),
  },

最后是在平面列表所在的 ExploreData 中：

<FlatList
          showsVerticalScrollIndicator={false}
          data={recipes}
          ListFooterComponent={renderFooter}
          refreshing={contentLoading}
          maxToRenderPerBatch={5}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }
          contentContainerStyle={styles.listStyles}
          renderItem={renderChefItem}
          onScroll={(e) => {
            scrollY.setValue(e.nativeEvent.contentOffset.y);
          }}
        />

Answer 1

您可以使用 onScrollEndDrag 和 onScrollBeginDrag 来切换标题的可见性。