u

code/app/app-rn4/src/components/layout/tabbar.tsx

@@ -28,7 +28,7 @@ export default function Tabbar({ tabs, value, onChange, className, style }: Tabb
   };
 
   return (
-    <View className={cn("mx-3", className)} style={style}>
+    <View className={cn("m-3", className)} style={style}>
       <Shadow
         distance={20}
         startColor="rgba(0,0,0,0.04)"
@@ -173,7 +173,6 @@ const styles = StyleSheet.create({
     borderWidth: 0.5,
     borderColor: "rgba(255,255,255,0.6)",
     height: 56,
-    marginBottom: 12,
     backgroundColor: "#fff",
   },
 });

code/app/app-rn4/src/components/layout/view.tsx

@@ -1,57 +1,116 @@
 import React from "react";
-import {
-  ScrollView,
-  SectionList,
-  FlatList,
-  ScrollViewProps,
-  SectionListProps,
-  FlatListProps,
-} from "react-native";
+import { ScrollView, SectionList, FlatList, View } from "react-native";
 
 import { ScrollShadow } from "heroui-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { LegendList } from "@legendapp/list";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-export function LVScrollShadow(props: React.ComponentProps<typeof ScrollShadow>) {
-  const { children } = props;
+/**
+ * 固定额外间距（你可以随便调）
+ */
+const TOP_EXTRA_PADDING = 60;
+const BOTTOM_EXTRA_PADDING = 80;
 
+/**
+ * Wrapper
+ */
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <View style={{ flex: 1, overflow: "hidden" }}>{children}</View>;
+}
+
+/**
+ * Shadow（只封装一次 ScrollShadow）
+ */
+function Shadow({ children }: { children: React.ReactElement }) {
   return (
-    <ScrollShadow className="flex-1 my-18" LinearGradientComponent={LinearGradient}>
+    <ScrollShadow className="flex-1" size={300} LinearGradientComponent={LinearGradient}>
       {children}
     </ScrollShadow>
   );
 }
 
-export function LVScrollView(props: ScrollViewProps) {
-  return <ScrollView {...props} />;
-}
-
-export function LVSectionView<T>(props: SectionListProps<T>) {
-  return <SectionList {...props} />;
-}
-
-export function LVLegendList<T>(props: React.ComponentProps<typeof LegendList<T>>) {
-  const { style, ...rest } = props;
-
-  return (
-    <ScrollShadow className="flex-1 my-18" LinearGradientComponent={LinearGradient}>
-      <LegendList<T> {...rest} style={[{ flex: 1 }, style]} />
-    </ScrollShadow>
-  );
-}
-
-export function LVFastList<T>(props: FlatListProps<T>) {
-  return <FlatList {...props} />;
+/**
+ * 统一 padding 计算
+ */
+function useContentPadding() {
+  const insets = useSafeAreaInsets();
+
+  return {
+    paddingTop: insets.top + TOP_EXTRA_PADDING,
+    paddingBottom: insets.bottom + BOTTOM_EXTRA_PADDING,
+  };
 }
 
+/**
+ * LayoutView
+ */
 const LayoutView = (props: { children?: React.ReactNode }) => {
-  return <>{props.children}</>;
+  return <View style={{ flex: 1 }}>{props.children}</View>;
 };
 
-LayoutView.ScrollShadow = LVScrollShadow;
-LayoutView.ScrollView = LVScrollView;
-LayoutView.SectionView = LVSectionView;
-LayoutView.LegendList = LVLegendList;
-LayoutView.FastList = LVFastList;
+/**
+ * ScrollView
+ */
+LayoutView.ScrollView = (props: React.ComponentProps<typeof ScrollView>) => {
+  const padding = useContentPadding();
+
+  return (
+    <Wrapper>
+      <Shadow>
+        <ScrollView
+          {...props}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[padding, props.contentContainerStyle]}
+        />
+      </Shadow>
+    </Wrapper>
+  );
+};
+
+/**
+ * SectionList
+ */
+LayoutView.SectionView = <T,>(props: React.ComponentProps<typeof SectionList<T>>) => {
+  const padding = useContentPadding();
+
+  return (
+    <Wrapper>
+      <Shadow>
+        <SectionList {...props} contentContainerStyle={[padding, props.contentContainerStyle]} />
+      </Shadow>
+    </Wrapper>
+  );
+};
+
+/**
+ * FlatList
+ */
+LayoutView.FastList = <T,>(props: React.ComponentProps<typeof FlatList<T>>) => {
+  const padding = useContentPadding();
+
+  return (
+    <Wrapper>
+      <Shadow>
+        <FlatList {...props} contentContainerStyle={[padding, props.contentContainerStyle]} />
+      </Shadow>
+    </Wrapper>
+  );
+};
+
+/**
+ * LegendList
+ */
+LayoutView.LegendList = <T,>(props: React.ComponentProps<typeof LegendList<T>>) => {
+  const padding = useContentPadding();
+
+  return (
+    <Wrapper>
+      <Shadow>
+        <LegendList<T> {...props} contentContainerStyle={[padding, props.contentContainerStyle]} />
+      </Shadow>
+    </Wrapper>
+  );
+};
 
 export default LayoutView;