u'

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

@@ -0,0 +1,72 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { ReactNode } from "react";
+import { View, Text } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import { ChevronLeft, SwatchBook, CircleChevronLeft, CirclePower } from "lucide-react-native";
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+export default function Layout({ children }: LayoutProps) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View className="flex-1 bg-white">
+      <View
+        style={{
+          flex: 1,
+          paddingTop: insets.top + 44,
+          paddingBottom: insets.bottom + 56,
+        }}
+      >
+        {children}
+      </View>
+      <View
+        className="absolute top-0 left-0 right-0"
+        style={{
+          paddingTop: insets.top,
+          height: insets.top + 48,
+        }}
+      >
+        <View className="h-12 flex-row items-center px-3">
+          {/* 左区域 */}
+          <View className="h-12 w-12 rounded-full bg-white items-center justify-center shadow-md">
+            <ChevronLeft size={28} />
+          </View>
+
+          {/* 中间标题 */}
+          <View className="flex-1 items-center ">
+            <Text className="text-xl font-semibold text-black">记账</Text>
+          </View>
+
+          {/* 右区域 */}
+          <View className="w-28 ">
+            <View className="h-12 flex-row items-center rounded-full bg-white shadow-md overflow-hidden">
+              <View className="px-4 items-center justify-center">
+                <SwatchBook size={22} />
+              </View>
+
+              <View className="w-[1px] h-4 bg-black/10" />
+
+              <View className="px-4 items-center justify-center">
+                <CirclePower size={22} />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          paddingBottom: insets.bottom,
+        }}
+      >
+        <Text>footer</Text>
+      </View>
+    </View>
+  );
+}

code/app/app-rn4/src/components/ui/box/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { boxStyle } from './styles';
+
+type IBoxProps = ViewProps &
+  VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<React.ComponentRef<typeof View>, IBoxProps>(
+  function Box({ className, ...props }, ref) {
+    return (
+      <View ref={ref} {...props} className={boxStyle({ class: className })} />
+    );
+  }
+);
+
+Box.displayName = 'Box';
+export { Box };

code/app/app-rn4/src/components/ui/box/index.web.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { boxStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+
+type IBoxProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<HTMLDivElement, IBoxProps>(function Box(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div ref={ref} className={boxStyle({ class: className })} {...props} />
+  );
+});
+
+Box.displayName = 'Box';
+export { Box };

code/app/app-rn4/src/components/ui/box/styles.tsx

@@ -0,0 +1,10 @@
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const boxStyle = tva({
+  base: baseStyle,
+});

code/app/app-rn4/src/components/ui/center/index.tsx

@@ -0,0 +1,22 @@
+import { View, ViewProps } from 'react-native';
+import React from 'react';
+import { centerStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+
+type ICenterProps = ViewProps & VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<React.ComponentRef<typeof View>, ICenterProps>(
+  function Center({ className, ...props }, ref) {
+    return (
+      <View
+        className={centerStyle({ class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Center.displayName = 'Center';
+
+export { Center };

code/app/app-rn4/src/components/ui/center/index.web.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { centerStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+
+type ICenterProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof centerStyle>;
+
+const Center = React.forwardRef<HTMLDivElement, ICenterProps>(function Center(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div className={centerStyle({ class: className })} {...props} ref={ref} />
+  );
+});
+
+Center.displayName = 'Center';
+
+export { Center };

code/app/app-rn4/src/components/ui/center/styles.tsx

@@ -0,0 +1,8 @@
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const centerStyle = tva({
+  base: `justify-center items-center ${baseStyle}`,
+});

code/app/app-rn4/src/components/ui/hstack/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { hstackStyle } from './styles';
+
+type IHStackProps = ViewProps & VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ComponentRef<typeof View>, IHStackProps>(
+  function HStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <View
+        className={hstackStyle({
+          space,
+          reversed: reversed as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

code/app/app-rn4/src/components/ui/hstack/index.web.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { hstackStyle } from './styles';
+
+type IHStackProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof hstackStyle>;
+
+const HStack = React.forwardRef<React.ComponentRef<'div'>, IHStackProps>(
+  function HStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <div
+        className={hstackStyle({
+          space,
+          reversed: reversed as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };

code/app/app-rn4/src/components/ui/hstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+
+const baseStyle = isWeb
+  ? 'flex relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const hstackStyle = tva({
+  base: `flex-row ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-row-reverse',
+    },
+  },
+});

code/app/app-rn4/src/components/ui/vstack/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { View } from 'react-native';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ComponentRef<typeof View>, IVStackProps>(
+  function VStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <View
+        className={vstackStyle({
+          space,
+          reversed: reversed as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

code/app/app-rn4/src/components/ui/vstack/index.web.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<'div'> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ComponentRef<'div'>, IVStackProps>(
+  function VStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <div
+        className={vstackStyle({
+          space,
+          reversed: reversed as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

code/app/app-rn4/src/components/ui/vstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const vstackStyle = tva({
+  base: `flex-col ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-col-reverse',
+    },
+  },
+});