fix: resolve Expo SDK 54 compatibility issues and React 19 JSX runtime errors

client/app/(splash)/splash.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, Image, StyleSheet, TouchableOpacity, Dimensions, Platform, Alert } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import * as WebBrowser from 'expo-web-browser';
 import { useTranslation } from 'react-i18next';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { setConsentAccepted, getConsentAccepted } from '../../src/storage/appStorage';
 
-import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
-import WelcomeBtn from '../../assets/images/index/welcome_btn.svg';
-
 const { width, height } = Dimensions.get('window');
 
 export default function SplashScreen() {
@@ -24,6 +22,10 @@ export default function SplashScreen() {
     const accepted = await getConsentAccepted();
     setShowConsent(!accepted);
     if (accepted) {
+        // 如果已经同意过，直接跳转到首页分发
+        // 注意：这里需要与 app/index.tsx 配合，如果 app/index.tsx 已经判断了 consent=true 不会跳过来，
+        // 那么这里其实是防守。
+        // 但如果用户是通过 deep link 或其他方式强制进入 splash，这个逻辑会把他们送走。
         router.replace('/');
     }
   };
@@ -44,35 +46,29 @@ export default function SplashScreen() {
 
   return (
     <View style={styles.container}>
-      {/* Top Image Area - No white card, placed below SVG */}
+      <Image
-      <View style={styles.imageContainer}>
+        source={require('../../assets/images/index/index_flowers.png')}
-        <Image
+        style={styles.image}
-          source={require('../../assets/images/index/index_flowers.png')}
+        resizeMode="contain"
-          style={styles.mainImage}
+      />
-          resizeMode="contain"
-        />
-      </View>
 
-      {/* Background Flower SVG - Placed above the image */}
-      <View style={styles.bgFlowerContainer}>
-        <FlowersBg width={width} height={height * 0.6} />
-      </View>
-
-      {/* Content Area */}
       <View style={styles.contentContainer}>
-        <Text style={styles.title}>
+        <Text style={styles.title}>{t('consent.title')}</Text>
-          You are perfect.{"\n"}
+        <Text style={styles.subtitle}>{t('consent.subtitle')}</Text>
-          Everything{"\n"}
-          will be better.
-        </Text>
       </View>
 
-      {/* Bottom Actions */}
       <SafeAreaView style={styles.bottomContainer} edges={['bottom']}>
         {showConsent && (
           <>
-            <TouchableOpacity onPress={handleAgree} activeOpacity={0.8} style={styles.welcomeBtnWrapper}>
+            <TouchableOpacity onPress={handleAgree} activeOpacity={0.8}>
-              <WelcomeBtn width={87} height={57} />
+              <LinearGradient
+                colors={['#F69F7B', '#F99CC0']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                style={styles.button}
+              >
+                <Text style={styles.buttonText}>{t('consent.agree')}</Text>
+              </LinearGradient>
             </TouchableOpacity>
 
             <View style={styles.linksContainer}>
@@ -94,64 +90,74 @@ export default function SplashScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5D3B5',
+    backgroundColor: '#FFF9F0', // 假设的背景色，根据图片调整
     alignItems: 'center',
   },
-  imageContainer: {
+  image: {
-    marginTop: 60,
+    width: width * 0.8,
-    width: width,
     height: height * 0.5,
-    alignItems: 'center',
+    marginTop: height * 0.1,
-    justifyContent: 'center',
-    zIndex: 1, // 放在底层
-  },
-  mainImage: {
-    width: width * 0.85,
-    height: '100%',
-  },
-  bgFlowerContainer: {
-    position: 'absolute',
-    bottom: -height * 0.05, // 向下移动屏幕高度的 5%
-    left: 0,
-    right: 0,
-    zIndex: 2, // 放在图片上层
   },
   contentContainer: {
-    marginTop: 40,
+    alignItems: 'center',
+    marginTop: 20,
     paddingHorizontal: 30,
-    zIndex: 3,
   },
   title: {
-    fontSize: 30,
+    fontSize: 24,
-    lineHeight: 42,
+    fontWeight: 'bold',
-    color: '#772F00',
+    color: '#4A3427', // 深褐色
+    marginBottom: 10,
     textAlign: 'center',
-    fontWeight: '600',
+    fontFamily: Platform.OS === 'ios' ? 'Georgia' : 'serif', // 尝试匹配衬线体
-    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+  },
+  subtitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#4A3427', // 深褐色
+    textAlign: 'center',
+    lineHeight: 24,
+    fontFamily: Platform.OS === 'ios' ? 'Georgia' : 'serif',
   },
   bottomContainer: {
     position: 'absolute',
-    bottom: 40,
+    bottom: 0,
     width: '100%',
     alignItems: 'center',
-    zIndex: 4,
+    paddingBottom: 20,
   },
-  welcomeBtnWrapper: {
+  button: {
-    marginBottom: 30,
+    width: width * 0.8,
+    paddingVertical: 16,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20,
+    shadowColor: '#F69F7B',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  buttonText: {
+    color: '#FFF',
+    fontSize: 18,
+    fontWeight: '600',
   },
   linksContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginBottom: 10,
   },
   linkText: {
     fontSize: 12,
-    color: 'rgba(119, 47, 0, 0.5)', // 配合整体色调的半透明褐色
+    color: '#999',
     textDecorationLine: 'underline',
   },
   divider: {
     width: 1,
     height: 12,
-    backgroundColor: 'rgba(119, 47, 0, 0.2)',
+    backgroundColor: '#CCC',
     marginHorizontal: 15,
   },
 });

client/app/index.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useRouter } from 'expo-router';
 
-import { getOnboardingCompleted, getConsentAccepted, setOnboardingCompleted } from '@/src/storage/appStorage';
+import { getOnboardingCompleted, getConsentAccepted } from '@/src/storage/appStorage';
 
 /**
  * 启动分发：根据 consent 和 onboarding 状态跳转
@@ -20,12 +20,6 @@ export default function Index() {
       const consentAccepted = await getConsentAccepted();
       if (cancelled) return;
 
-      if (!consentAccepted) {
-        router.replace('/(splash)/splash');
-        return;
-      }
-      if (cancelled) return;
-
       if (!consentAccepted) {
         router.replace('/(splash)/splash');
         return;

client/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
+    ]
+  };
+};

client/metro.config.js

@@ -1,20 +1,19 @@
-// Metro 配置：支持 import 本地 .svg 为 React 组件
-// 说明：Expo SDK 54 + react-native-svg-transformer 的常见配置方式
 const { getDefaultConfig } = require('expo/metro-config');
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
+const { transformer, resolver } = config;
+
 config.transformer = {
-  ...config.transformer,
+  ...transformer,
   babelTransformerPath: require.resolve('react-native-svg-transformer'),
 };
 
 config.resolver = {
-  ...config.resolver,
+  ...resolver,
-  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
+  assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
-  sourceExts: [...config.resolver.sourceExts, 'svg'],
+  sourceExts: [...resolver.sourceExts, 'svg', 'mjs'],
 };
 
 module.exports = config;
-

client/package.json

@@ -6,8 +6,7 @@
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web",
+    "web": "expo start --web"
-    "postinstall": "node ./scripts/postinstall-fix-metro.js"
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
@@ -38,6 +37,7 @@
     "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
     "@types/react": "~19.1.0",
     "react-test-renderer": "19.1.0",
     "typescript": "~5.9.2"