react-native - 如何创建带有嵌套滚动视图(如 twitter 或 instagram 个人资料屏幕)的粘性选项卡选择器 [REACT-NATIVE]
问题描述
我正在尝试创建一个包含一个粘性选择器的 ScrollView,它允许在两个嵌套的 ScollViews 之间进行选择。就像 twitter 个人资料屏幕或 instagram 屏幕一样,您可以在我的帖子和我被标记的帖子之间切换。现在我的问题实际上是这两个嵌套的 ScollViews,假设“MY POSTS”和“TAGGED”可能有不同的大小,但是 RootScrollView 只考虑两个滚动视图的最大高度,所以如果在第一个我有 20 个项目,假设高度 = 1000,如果我没有物品或更少的物品,我将有一个空白空间 y 偏移量,就像第一个一样。
我知道这不是很清楚,但如果你打开 instagram 或 twitter 个人资料屏幕,你会立即得到它,不同高度的问题。
现在你会看到,我试图做的是创建一个 RootScrollView,在其中放入两个视图,标题和粘性选择器,在 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>
);
};
解决方案
推荐阅读
- macos - 使用 AppleScript 安排系统重启
- php - 在分配任务的前一天发送电子邮件
- python - 如何从 NavigationToolbar2Tk/FigureCanvasTkAgg 中删除工具栏按钮
- react-native - 无法在 react-native-reanimated-bottom-sheet 中滚动 Flatlist
- python - 如何从 tarfile 流式传输文件以供阅读?
- ios - 当我在 swift iOS 中垂直滚动时,Tableview 单元格数据正在发生变化
- gherkin - 在 BDD/gherkin 中,如何在可重用的后续步骤中使用部分结果
- angular - Nrwl NX:提供从应用程序到库的样式变量
- angular - 如何在角度上制作适当长度的 serach bar
- c# - C#如何停止控制台程序等待下一行的输入?