u

code/app/app-rn3/app.json

@@ -7,7 +7,6 @@
     "icon": "./assets/images/icon.png",
     "scheme": "apprn3",
     "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
     },
@@ -18,7 +17,6 @@
         "backgroundImage": "./assets/images/android-icon-background.png",
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
       },
-      "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false
     },
     "web": {
@@ -39,7 +37,10 @@
             "backgroundColor": "#000000"
           }
         }
-      ]
+      ],
+      "expo-font",
+      "expo-image",
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true,

code/app/app-rn3/app/(tabs)/user/index.tsx

@@ -1,9 +1,56 @@
-import { View, Text } from "react-native";
+import { BlurView } from "expo-blur";
+import { useRef } from "react";
+import { Text, StyleSheet, View } from "react-native";
+
+export default function App() {
+  const targetRef = useRef<View | null>(null);
+  const text = "Hello, my container is blurring contents underneath!";
 
-export default function User() {
   return (
-    <View className="flex-1">
-      <Text>User</Text>
+    <View style={styles.container}>
+      <BlurView intensity={100} style={styles.blurContainer}>
+        <Text style={styles.text}>{text}</Text>
+      </BlurView>
+      <BlurView intensity={80} tint="light" style={styles.blurContainer}>
+        <Text style={styles.text}>{text}</Text>
+      </BlurView>
+      <BlurView intensity={90} tint="dark" style={styles.blurContainer}>
+        <Text style={[styles.text, { color: "#fff" }]}>{text}</Text>
+      </BlurView>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  blurContainer: {
+    flex: 1,
+    padding: 20,
+    margin: 16,
+    textAlign: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 20,
+  },
+  background: {
+    flex: 1,
+    flexWrap: "wrap",
+    ...StyleSheet.absoluteFill,
+  },
+  box: {
+    width: "25%",
+    height: "20%",
+  },
+  boxEven: {
+    backgroundColor: "orangered",
+  },
+  boxOdd: {
+    backgroundColor: "gold",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "600",
+  },
+});

code/app/app-rn3/babel.config.js

@@ -1,6 +1,10 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
+    presets: [
+      require("nativewind/preset"),
+      [("babel-preset-expo", { jsxImportSource: "nativewind" })],
+      "nativewind/babel",
+    ],
   };
 };

code/app/app-rn3/components/common/tabbar.tsx

@@ -9,12 +9,13 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import * as icons from "lucide-react-native/icons";
+import { BlurView } from "expo-blur";
 
 export interface TabbarItem {
   name: string;
   href: Href;
-  icon: keyof typeof icons; // 👈 传 icon 名字
-  label: string; // 👈 label
+  icon: keyof typeof icons;
+  label: string;
   onPress?: () => void;
 }
 
@@ -48,7 +49,6 @@ function TabButton({
     }
   }, [isFocused]);
 
-  // 👇 在内部统一处理 icon
   const LucideIcon = icons[iconName];
 
   return (
@@ -61,18 +61,13 @@ function TabButton({
       }}
     >
       <Animated.View style={animatedStyle}>
-        <LucideIcon
-          size={22}
-          color={"#333"}
-          fill={isFocused ? "#0284c7" : "#fff"} // 填充颜色
-          strokeWidth={2}
-        />
+        <LucideIcon size={22} color={isFocused ? "#111" : "#999"} strokeWidth={2} />
 
         <Text
           style={{
             fontSize: 10,
             marginTop: 2,
-            color: "#333",
+            color: isFocused ? "#111" : "#999",
           }}
         >
           {label}
@@ -88,7 +83,6 @@ export default function CustomTabbar({ data }: AppTabbarProps) {
 
   const [activeTab, setActiveTab] = useState("");
 
-  // 路由同步
   useEffect(() => {
     const match = data.find((item) => item.href === pathname);
     if (match) {
@@ -98,30 +92,38 @@ export default function CustomTabbar({ data }: AppTabbarProps) {
 
   const handlePressTab = (item: TabbarItem) => {
     setActiveTab(item.name);
-
     router.push(item.href);
-
     item.onPress?.();
   };
 
   return (
     <View
       style={{
-        flexDirection: "row",
-        height: 48,
-        alignItems: "center",
-        backgroundColor: "#fff",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
       }}
     >
-      {data.map((item) => (
-        <TabButton
-          key={item.name}
-          iconName={item.icon}
-          label={item.label}
-          isFocused={activeTab === item.name}
-          onPress={() => handlePressTab(item)}
-        />
-      ))}
+      <BlurView
+        intensity={90}
+        tint="light"
+        blurMethod="dimezisBlurView"
+        style={{
+          flexDirection: "row",
+          height: 56,
+        }}
+      >
+        {data.map((item) => (
+          <TabButton
+            key={item.name}
+            iconName={item.icon}
+            label={item.label}
+            isFocused={activeTab === item.name}
+            onPress={() => handlePressTab(item)}
+          />
+        ))}
+      </BlurView>
     </View>
   );
 }

code/app/app-rn3/metro.config.js

@@ -1,6 +1,20 @@
+// metro.config.js
 const { getDefaultConfig } = require("expo/metro-config");
 const { withNativeWind } = require("nativewind/metro");
 
+/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
+config.transformer = {
+  ...config.transformer,
+  babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
+};
+
+config.resolver = {
+  ...config.resolver,
+  unstable_enablePackageExports: true,
+  assetExts: config.resolver.assetExts.filter((ext) => ext !== "svg"),
+  sourceExts: [...config.resolver.sourceExts, "svg"],
+};
+
 module.exports = withNativeWind(config, { input: "./styles/global.css" });

code/app/app-rn3/package.json

@@ -18,35 +18,36 @@
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
-    "expo": "~54.0.33",
-    "expo-constants": "~18.0.13",
-    "expo-font": "~14.0.11",
-    "expo-haptics": "~15.0.8",
-    "expo-image": "~3.0.11",
-    "expo-linking": "~8.0.11",
-    "expo-router": "~6.0.23",
-    "expo-splash-screen": "~31.0.13",
-    "expo-status-bar": "~3.0.9",
-    "expo-symbols": "~1.0.8",
-    "expo-system-ui": "~6.0.9",
-    "expo-web-browser": "~15.0.10",
+    "expo": "~55.0.12",
+    "expo-blur": "~55.0.13",
+    "expo-constants": "~55.0.12",
+    "expo-font": "~55.0.6",
+    "expo-haptics": "~55.0.13",
+    "expo-image": "~55.0.8",
+    "expo-linking": "~55.0.11",
+    "expo-router": "~55.0.11",
+    "expo-splash-screen": "~55.0.16",
+    "expo-status-bar": "~55.0.5",
+    "expo-symbols": "~55.0.7",
+    "expo-system-ui": "~55.0.14",
+    "expo-web-browser": "~55.0.13",
     "lucide-react-native": "^1.7.0",
     "nativewind": "^4.2.3",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.5",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.4",
     "react-native-css-interop": "^0.2.3",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.7",
+    "react-native-gesture-handler": "~2.30.1",
+    "react-native-reanimated": "~4.2.1",
     "react-native-safe-area-context": "~5.6.2",
-    "react-native-screens": "~4.16.0",
-    "react-native-svg": "15.12.1",
+    "react-native-screens": "~4.23.0",
+    "react-native-svg": "15.15.3",
     "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1",
+    "react-native-worklets": "0.7.2",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@types/react": "~19.1.0",
+    "@types/react": "~19.2.14",
     "babel-preset-expo": "^55.0.16",
     "oxfmt": "^0.44.0",
     "prettier-plugin-tailwindcss": "^0.5.14",