使用粘性顶部选项卡导航器创建ScrollView

Question

你好，我正在尝试在我的应用程序中创建一个看起来非常类似的组件。我目前正在努力解决如何制作它，这样我就可以有一个可折叠的标题，无缝地滚动标题和嵌套的选项卡滚动视图。

这是我迄今为止所拥有的。正如您所看到的，滚动视图导致标题和内容区域同时滚动。我想知道是否有一种方法可以先滚动标题(在顶部时(，然后滚动内容区域。

这是我的代码
带选项卡的标题在父级中渲染：

<Animated.View 
style={[styles.headerScrollableContainerContent, {
top: headerHeight
}]} 
>
<View>
{...header content}
</View
{TabRender()}
</Animated.View>

收割台高度计算：

const scrollY = useRef(new Animated.Value(0)).current;
const headerHeight = scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE],
outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
extrapolate: 'clamp',
});

关于选项卡：

<ScrollView
style={styles.container}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: props.scrollY}}}],
{useNativeDriver: false}
)}
scrollEventThrottle={16}
>
{...Scroll content}
</ScrollView>

如果你有什么想法或建议，请告诉我。任何帮助都将不胜感激！

Answer 1

我最终使用了这篇Medium文章。这真的很有帮助，如果你的卡住了，我强烈建议你检查一下