Browse Source

feat: 升级expo到54

kuns 2 months ago
parent
commit
10d3835236
6 changed files with 293 additions and 218 deletions
  1. 1 4
      app.json
  2. 1 0
      babel.config.js
  3. 32 40
      component/global/rippleEffectBatteryIcon.tsx
  4. 0 1
      index.js
  5. 230 149
      package-lock.json
  6. 29 24
      package.json

+ 1 - 4
app.json

@@ -40,10 +40,7 @@
                 "backgroundColor": "#000000"
             },
             "icon": "./assets/cc_android_ccLogo.png",
-            "notification": {
-                "icon": "./assets/cc_android_notification_icon.png",
-                "color": "#02677D"
-            },
+
             "permissions": [
                 "android.permission.INTERNET",
                 "android.permission.CAMERA",

+ 1 - 0
babel.config.js

@@ -6,6 +6,7 @@ module.exports = function (api) {
             "nativewind/babel",
         ],
         plugins: [
+            'react-native-worklets/plugin',
         ]
     };
 };

+ 32 - 40
component/global/rippleEffectBatteryIcon.tsx

@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
-import Animated, {
-    useAnimatedStyle,
-    useSharedValue,
-    withRepeat,
-    withTiming
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming, // 确保导入了 withTiming
 } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import Svg, { Path, Rect } from 'react-native-svg';
 
 const BatterySvg = () => (
     <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
         <Rect width="40" height="40" rx="20" fill="#02677D" />
         <Path
-            d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 20.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
+            d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 24.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
             fill="#FAFAFA"
         />
     </Svg>
@@ -22,7 +22,11 @@ const BatterySvg = () => (
 const RippleEffectBatteryIcon = () => {
     const scaleValue = useSharedValue(1);
     const opacityValue = useSharedValue(1);
-    const textScaleValue = useSharedValue(0.4);
+
+    useEffect(() => {
+        scaleValue.value = withRepeat(withTiming(3, { duration: 2000 }), -1, false); // 使用 withTiming
+        opacityValue.value = withRepeat(withTiming(0, { duration: 2000 }), -1, false); // 使用 withTiming
+    }, []);
 
     const animatedCircle = useAnimatedStyle(() => {
         return {
@@ -31,29 +35,14 @@ const RippleEffectBatteryIcon = () => {
         };
     });
 
-    const startRippleAnimation = () => {
-        scaleValue.value = withRepeat(withTiming(3, { duration: 2000 }), -1);
-        opacityValue.value = withRepeat(withTiming(0, { duration: 2000 }), -1);
-        textScaleValue.value = withRepeat(
-            withTiming(1, { duration: 10000 }),
-            -1
-        );
-    };
-
-    useEffect(() => {
-        startRippleAnimation();
-    }, []);
-
     return (
-        <View className="relative">
-            <View className="absolute">
-                <BatterySvg></BatterySvg>
-            </View>
-            <View style={{ width: 40, height: 40 }}>
-                <Animated.View
-                    style={[animatedCircle, styles.innerCircle]}
-                ></Animated.View>
+        <View style={styles.container}>
+            <View style={styles.batteryContainer}>
+                <BatterySvg />
             </View>
+            <Animated.View
+                style={[styles.innerCircle, animatedCircle]}
+            />
         </View>
     );
 };
@@ -61,18 +50,21 @@ const RippleEffectBatteryIcon = () => {
 export default RippleEffectBatteryIcon;
 
 const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        width: 40,
+        height: 40,
+    },
+    batteryContainer: {
+        position: 'absolute',
+        zIndex: 2,
+    },
     innerCircle: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 200,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
         backgroundColor: '#025c72',
-        justifyContent: 'center'
-    },
-    innerText: {
-        fontSize: 14,
-        alignSelf: 'center',
-        fontWeight: 'bold',
         position: 'absolute',
-        top: wp(10)
+        zIndex: 1,
     }
-});
+});

+ 0 - 1
index.js

@@ -1,5 +1,4 @@
 import { registerRootComponent } from 'expo';
-
 import App from './App';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);

File diff suppressed because it is too large
+ 230 - 149
package-lock.json


+ 29 - 24
package.json

@@ -7,9 +7,11 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "remove": "rm -rf node_modules package-lock.json"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~6.1.2",
     "@gorhom/bottom-sheet": "^5.1.8",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@shopify/flash-list": "2.0.2",
@@ -21,27 +23,29 @@
     "date-fns": "4.1.0",
     "date-fns-tz": "^3.2.0",
     "dotenv": "^17.2.1",
-    "expo": "^53.0.0",
-    "expo-camera": "~16.1.11",
-    "expo-checkbox": "~4.1.4",
-    "expo-constants": "~17.1.7",
-    "expo-dev-client": "~5.2.4",
-    "expo-device": "~7.1.4",
+    "expo": "^54.0.9",
+    "expo-camera": "~17.0.8",
+    "expo-checkbox": "~5.0.7",
+    "expo-clipboard": "~8.0.7",
+    "expo-constants": "~18.0.9",
+    "expo-dev-client": "~6.0.12",
+    "expo-device": "~8.0.8",
     "expo-env": "^1.1.1",
-    "expo-file-system": "~18.1.11",
-    "expo-image-picker": "~16.1.4",
-    "expo-linking": "~7.1.7",
-    "expo-location": "~18.1.6",
-    "expo-notifications": "~0.31.4",
-    "expo-router": "~5.1.4",
-    "expo-secure-store": "~14.2.3",
-    "expo-status-bar": "~2.2.3",
-    "expo-updates": "~0.28.17",
+    "expo-file-system": "~19.0.14",
+    "expo-image-picker": "~17.0.8",
+    "expo-linking": "~8.0.8",
+    "expo-location": "~19.0.7",
+    "expo-notifications": "~0.32.11",
+    "expo-router": "~6.0.7",
+    "expo-secure-store": "~15.0.7",
+    "expo-status-bar": "~3.0.8",
+    "expo-updates": "~29.0.11",
     "lodash": "^4.17.21",
-    "nativewind": "^4.1.23",
+    "nativewind": "^4.2.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "react": "19.0.0",
-    "react-native": "0.79.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
@@ -49,24 +53,25 @@
     "react-native-modal": "14.0.0-rc.1",
     "react-native-modern-datepicker": "^1.0.0-beta.91",
     "react-native-pager-view": "^6.9.1",
-    "react-native-reanimated": "~3.17.4",
+    "react-native-reanimated": "~4.1.0",
     "react-native-responsive-screen": "^1.4.2",
     "react-native-safe-area-context": "5.6.0",
-    "react-native-screens": "~4.13.1",
+    "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-tab-view": "4.1.3",
     "react-native-webview": "13.15.0",
-    "zustand": "^4.5.2",
-    "expo-clipboard": "~7.1.5"
+    "react-native-worklets": "0.5.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@types/crypto-js": "^4.2.2",
-    "@types/react": "~19.0.10",
+    "@types/react": "19.1.0",
     "@types/react-native-modern-datepicker": "^1.0.5",
     "lightningcss": "^1.30.1",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
+    "babel-preset-expo": "^54.0.1",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.9.2"
   },

Some files were not shown because too many files changed in this diff