ScrollView 内的 React Native Stack.screen [已关闭]

Question

我正在尝试让我的所有屏幕完全可滚动。直接使用ScrollView就可以了吗？ （也许，没有线索）。第二个问题，我正在创建的应用程序具有以下设置：

_layout.tsx（根）-带有标题组件

-----（滑动）（文件夹）

------------_layout.tsx | 索引.tsx

如果您只是将滚动视图添加到index.tsx，那么标题将粘在视图的顶部，但是它应该就像页面的一部分一样。

经过一些测试，我假设 ScrollView 内的堆栈不起作用（我可能是错的）。 这就是我所说的根布局：

export default function RootLayout() {

    return (
        <QueryClientProvider client={queryClient}>
            <GestureHandlerRootView className="bg-black flex-1">
                <ScrollView
                    className="flex-1 bg-black"
                    contentContainerStyle={{ flexGrow: 1 }}
                >
                    <SafeAreaView className="bg-black">
                        <Header />
                    </SafeAreaView>

                    <View className="flex-1 bg-black">
                        <Stack
                            screenOptions={{
                                headerShown: false,
                                contentStyle: { backgroundColor: "#000000" },
                            }}
                        >
                            <Stack.Screen name="(swiper)" />
                        </Stack>
                    </View>

                    <StatusBar style="light" backgroundColor="#000000" />
                </ScrollView>
                <Toast />
            </GestureHandlerRootView>
        </QueryClientProvider>
    );
}

如果有人有建议，请告诉我。 也许有不同的方法来解决这个问题或者我缺少的替代方案。

提前致谢:)

Answer 1

嘿，如果您想使所有屏幕完全可滚动，您可以使用以下方法：

• 包装layout.tsx | index.tsx 与 ScrollView 组件
• 从layout.tsx（根）中移动 header 组件并在 Scrollview 下渲染它，这样 Header 是直接子级并且会按比例移动到 ScrollView

子布局组件：

<ScrollView
  className="flex-1 bg-black"
  contentContainerStyle={{ flexGrow: 1 }}
>
   <SafeAreaView className="bg-black">
       <Header />
   </SafeAreaView>

   {...} // replace with your layout.tsx | index.tsx component content
</ScrollView>

更新的根布局：

export default function RootLayout() {
    return (
        <QueryClientProvider client={queryClient}>
            <GestureHandlerRootView className="bg-black flex-1">
                <Stack
                  screenOptions={{
                  headerShown: false,
                  contentStyle: { backgroundColor: "#000000" },
                  }}
                  >
                     <Stack.Screen name="(swiper)" />
                  </Stack>
                <Toast />
            </GestureHandlerRootView>
        </QueryClientProvider>
    );
}