From 2b160cae698e32669903f26b6bdef8740c7eeabe Mon Sep 17 00:00:00 2001 From: tx <2622874537@qq.com> Date: Thu, 7 Nov 2024 17:47:25 +0800 Subject: [PATCH] 11 --- .vscode/settings.json | 3 + App.tsx | 176 +++++++--------- package-lock.json | 370 +++++++++++++++++++++++++++++++++- package.json | 9 +- src/utils/http.ts | 41 ++++ src/utils/rpx.ts | 9 + src/views/Home/HomeScreen.tsx | 42 ++++ src/views/Home/MiniMap.tsx | 47 +++++ src/views/Home/NoDevice.tsx | 106 ++++++++++ src/views/Home/NormaIndex.tsx | 300 +++++++++++++++++++++++++++ src/views/Home/slider.tsx | 170 ++++++++++++++++ src/views/ProfileScreen.jsx | 24 +++ src/views/ShopScreen.jsx | 21 ++ 13 files changed, 1206 insertions(+), 112 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/utils/http.ts create mode 100644 src/utils/rpx.ts create mode 100644 src/views/Home/HomeScreen.tsx create mode 100644 src/views/Home/MiniMap.tsx create mode 100644 src/views/Home/NoDevice.tsx create mode 100644 src/views/Home/NormaIndex.tsx create mode 100644 src/views/Home/slider.tsx create mode 100644 src/views/ProfileScreen.jsx create mode 100644 src/views/ShopScreen.jsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c5f3f6b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "java.configuration.updateBuildConfiguration": "interactive" +} \ No newline at end of file diff --git a/App.tsx b/App.tsx index 125fe1b..10c345c 100644 --- a/App.tsx +++ b/App.tsx @@ -1,117 +1,83 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - */ +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { View, StyleSheet, Image,Platform } from 'react-native'; +import HomeScreens from './src/views/Home/HomeScreen'; +import ShopScreens from './src/views/ShopScreen'; +import ProfileScreens from './src/views/ProfileScreen'; +import 'react-native-gesture-handler'; +import { enableScreens } from 'react-native-screens'; -import React from 'react'; -import type {PropsWithChildren} from 'react'; -import { - SafeAreaView, - ScrollView, - StatusBar, - StyleSheet, - Text, - useColorScheme, - View, -} from 'react-native'; +// import { AMapSdk } from 'react-native-amap3d'; -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; +// AMapSdk.init(Platform.select({ +// android: '812efd3a950ba3675f928630302c6463', + +// })); -type SectionProps = PropsWithChildren<{ - title: string; -}>; +enableScreens(); -function Section({children, title}: SectionProps): React.JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; +type RootStackParamList = { + '爱车': undefined; + '商城': undefined; + '个人中心': undefined; +}; + +const Tab = createBottomTabNavigator(); + +function App() { return ( - - - {title} - - - {children} - - - ); -} - -function App(): React.JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; - - return ( - - - -
- -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - + + + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); } const styles = StyleSheet.create({ - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - }, - highlight: { - fontWeight: '700', + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', }, }); diff --git a/package-lock.json b/package-lock.json index 773b99b..22a4981 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,15 @@ "name": "BikeApp_demo", "version": "0.0.1", "dependencies": { + "@react-navigation/bottom-tabs": "^6.6.1", + "@react-navigation/native": "^6.1.18", + "axios": "^1.7.7", "react": "18.2.0", - "react-native": "0.74.5" + "react-native": "0.74.5", + "react-native-amap3d": "^3.0.7", + "react-native-gesture-handler": "^2.20.2", + "react-native-safe-area-context": "^4.14.0", + "react-native-screens": "^3.35.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -2004,6 +2011,17 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmmirror.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "dependencies": { + "@types/hammerjs": "^2.0.36" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -3271,6 +3289,78 @@ } } }, + "node_modules/@react-navigation/bottom-tabs": { + "version": "6.6.1", + "resolved": "https://registry.npmmirror.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.6.1.tgz", + "integrity": "sha512-9oD4cypEBjPuaMiu9tevWGiQ4w/d6l3HNhcJ1IjXZ24xvYDSs0mqjUcdt8SWUolCvRrYc/DmNBLlT83bk0bHTw==", + "dependencies": { + "@react-navigation/elements": "^1.3.31", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, + "node_modules/@react-navigation/core": { + "version": "6.4.17", + "resolved": "https://registry.npmmirror.com/@react-navigation/core/-/core-6.4.17.tgz", + "integrity": "sha512-Nd76EpomzChWAosGqWOYE3ItayhDzIEzzZsT7PfGcRFDgW5miHV2t4MZcq9YIK4tzxZjVVpYbIynOOQQd1e0Cg==", + "dependencies": { + "@react-navigation/routers": "^6.1.9", + "escape-string-regexp": "^4.0.0", + "nanoid": "^3.1.23", + "query-string": "^7.1.3", + "react-is": "^16.13.0", + "use-latest-callback": "^0.2.1" + }, + "peerDependencies": { + "react": "*" + } + }, + "node_modules/@react-navigation/core/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/@react-navigation/elements": { + "version": "1.3.31", + "resolved": "https://registry.npmmirror.com/@react-navigation/elements/-/elements-1.3.31.tgz", + "integrity": "sha512-bUzP4Awlljx5RKEExw8WYtif8EuQni2glDaieYROKTnaxsu9kEIA515sXQgUDZU4Ob12VoL7+z70uO3qrlfXcQ==", + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0" + } + }, + "node_modules/@react-navigation/native": { + "version": "6.1.18", + "resolved": "https://registry.npmmirror.com/@react-navigation/native/-/native-6.1.18.tgz", + "integrity": "sha512-mIT9MiL/vMm4eirLcmw2h6h/Nm5FICtnYSdohq4vTLA2FF/6PNhByM7s8ffqoVfE5L0uAa6Xda1B7oddolUiGg==", + "dependencies": { + "@react-navigation/core": "^6.4.17", + "escape-string-regexp": "^4.0.0", + "fast-deep-equal": "^3.1.3", + "nanoid": "^3.1.23" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/@react-navigation/routers": { + "version": "6.1.9", + "resolved": "https://registry.npmmirror.com/@react-navigation/routers/-/routers-6.1.9.tgz", + "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==", + "dependencies": { + "nanoid": "^3.1.23" + } + }, "node_modules/@rnx-kit/chromium-edge-launcher": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/@rnx-kit/chromium-edge-launcher/-/chromium-edge-launcher-1.0.0.tgz", @@ -3400,6 +3490,11 @@ "@types/node": "*" } }, + "node_modules/@types/hammerjs": { + "version": "2.0.46", + "resolved": "https://registry.npmmirror.com/@types/hammerjs/-/hammerjs-2.0.46.tgz", + "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmmirror.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", @@ -4030,6 +4125,11 @@ "resolved": "https://registry.npmmirror.com/async-limiter/-/async-limiter-1.0.1.tgz", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -4045,6 +4145,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmmirror.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -4538,6 +4648,18 @@ "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==", "dev": true }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -4554,11 +4676,31 @@ "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/colorette": { "version": "1.4.0", "resolved": "https://registry.npmmirror.com/colorette/-/colorette-1.4.0.tgz", "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/command-exists": { "version": "1.2.9", "resolved": "https://registry.npmmirror.com/command-exists/-/command-exists-1.2.9.tgz", @@ -4846,6 +4988,14 @@ "node": ">=0.10.0" } }, + "node_modules/decode-uri-component": { + "version": "0.2.2", + "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz", + "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", + "engines": { + "node": ">=0.10" + } + }, "node_modules/dedent": { "version": "1.5.3", "resolved": "https://registry.npmmirror.com/dedent/-/dedent-1.5.3.tgz", @@ -4919,6 +5069,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/denodeify": { "version": "1.2.1", "resolved": "https://registry.npmmirror.com/denodeify/-/denodeify-1.2.1.tgz", @@ -5960,8 +6118,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-diff": { "version": "1.3.0", @@ -6067,6 +6224,14 @@ "node": ">=8" } }, + "node_modules/filter-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz", + "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.1.2.tgz", @@ -6242,6 +6407,25 @@ "node": ">=0.4.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz", @@ -6251,6 +6435,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz", @@ -6627,6 +6824,19 @@ "node": ">= 8" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmmirror.com/html-escaper/-/html-escaper-2.0.2.tgz", @@ -8050,6 +8260,11 @@ "node": ">=4.0" } }, + "node_modules/kdbush": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-3.0.0.tgz", + "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz", @@ -8754,6 +8969,23 @@ "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz", @@ -9361,7 +9593,6 @@ "version": "15.8.1", "resolved": "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -9371,8 +9602,12 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, "node_modules/punycode": { "version": "2.3.1", @@ -9399,6 +9634,23 @@ } ] }, + "node_modules/query-string": { + "version": "7.1.3", + "resolved": "https://registry.npmmirror.com/query-string/-/query-string-7.1.3.tgz", + "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==", + "dependencies": { + "decode-uri-component": "^0.2.2", + "filter-obj": "^1.1.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/querystring": { "version": "0.2.1", "resolved": "https://registry.npmmirror.com/querystring/-/querystring-0.2.1.tgz", @@ -9463,6 +9715,17 @@ "ws": "^7" } }, + "node_modules/react-freeze": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/react-freeze/-/react-freeze-1.0.4.tgz", + "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.3.1.tgz", @@ -9527,6 +9790,51 @@ } } }, + "node_modules/react-native-amap3d": { + "version": "3.2.4", + "resolved": "https://registry.npmmirror.com/react-native-amap3d/-/react-native-amap3d-3.2.4.tgz", + "integrity": "sha512-Cp7Tqd87arrxoBQdUGwmtjv7BuSt1XAqc/G+a/woI/pJqlUQScMqW/iHNJKC4jWr3wrJeaOYcjkOouoWCdDoOw==", + "dependencies": { + "supercluster": "^7.1.4" + } + }, + "node_modules/react-native-gesture-handler": { + "version": "2.20.2", + "resolved": "https://registry.npmmirror.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.2.tgz", + "integrity": "sha512-HqzFpFczV4qCnwKlvSAvpzEXisL+Z9fsR08YV5LfJDkzuArMhBu2sOoSPUF/K62PCoAb+ObGlTC83TKHfUd0vg==", + "dependencies": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-safe-area-context": { + "version": "4.14.0", + "resolved": "https://registry.npmmirror.com/react-native-safe-area-context/-/react-native-safe-area-context-4.14.0.tgz", + "integrity": "sha512-/SyYpCulWQOnnXhRq6wepkhoyQMowHm1ptDyRz20s+YS/R9mbd+mK+jFyFCyXFJn8jp7vFl43VUCgspuOiEbwA==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-screens": { + "version": "3.35.0", + "resolved": "https://registry.npmmirror.com/react-native-screens/-/react-native-screens-3.35.0.tgz", + "integrity": "sha512-rmkqb/M/SQIrXwygk6pXcOhgHltYAhidf1WceO7ujAxkr6XtwmgFyd1HIztsrJa568GrAuwPdQ11I7TpVk+XsA==", + "dependencies": { + "react-freeze": "^1.0.0", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native/node_modules/@jest/types": { "version": "26.6.2", "resolved": "https://registry.npmmirror.com/@jest/types/-/types-26.6.2.tgz", @@ -10155,6 +10463,19 @@ "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz", @@ -10223,6 +10544,14 @@ "source-map": "^0.6.0" } }, + "node_modules/split-on-first": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz", + "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==", + "engines": { + "node": ">=6" + } + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -10279,6 +10608,14 @@ "node": ">= 0.6" } }, + "node_modules/strict-uri-encode": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==", + "engines": { + "node": ">=4" + } + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz", @@ -10462,6 +10799,14 @@ "resolved": "https://registry.npmmirror.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz", "integrity": "sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==" }, + "node_modules/supercluster": { + "version": "7.1.5", + "resolved": "https://registry.npmmirror.com/supercluster/-/supercluster-7.1.5.tgz", + "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==", + "dependencies": { + "kdbush": "^3.0.0" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz", @@ -10929,6 +11274,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-latest-callback": { + "version": "0.2.1", + "resolved": "https://registry.npmmirror.com/use-latest-callback/-/use-latest-callback-0.2.1.tgz", + "integrity": "sha512-QWlq8Is8BGWBf883QOEQP5HWYX/kMI+JTbJ5rdtvJLmXTIh9XoHIO3PQcmQl8BU44VKxow1kbQUHa6mQSMALDQ==", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -10977,6 +11330,11 @@ "makeerror": "1.0.12" } }, + "node_modules/warn-once": { + "version": "0.1.1", + "resolved": "https://registry.npmmirror.com/warn-once/-/warn-once-0.1.1.tgz", + "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==" + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index b53b32a..641dd6d 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,15 @@ "test": "jest" }, "dependencies": { + "@react-navigation/bottom-tabs": "^6.6.1", + "@react-navigation/native": "^6.1.18", + "axios": "^1.7.7", "react": "18.2.0", - "react-native": "0.74.5" + "react-native": "0.74.5", + "react-native-amap3d": "^3.0.7", + "react-native-gesture-handler": "^2.20.2", + "react-native-safe-area-context": "^4.14.0", + "react-native-screens": "^3.35.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/utils/http.ts b/src/utils/http.ts new file mode 100644 index 0000000..ee29a2d --- /dev/null +++ b/src/utils/http.ts @@ -0,0 +1,41 @@ +// utils/http.ts +import axios from 'axios'; + +// 创建一个 axios 实例 +const http = axios.create({ + baseURL: 'https://dche.ccttiot.com/prod-api', // 替换为你的 API 基础 URL + timeout: 10000, // 请求超时时间 + headers: { + 'Content-Type': 'application/json', + }, +}); + +// 添加请求拦截器 +http.interceptors.request.use( + config => { + // 在发送请求之前做些什么，例如添加 token + const token = 'your-token'; // 这里获取你的 token + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + error => { + // 对请求错误做些什么 + return Promise.reject(error); + } +); + +// 添加响应拦截器 +http.interceptors.response.use( + response => { + // 对响应数据做点什么 + return response.data; + }, + error => { + // 对响应错误做点什么 + return Promise.reject(error); + } +); + +export default http; diff --git a/src/utils/rpx.ts b/src/utils/rpx.ts new file mode 100644 index 0000000..904a379 --- /dev/null +++ b/src/utils/rpx.ts @@ -0,0 +1,9 @@ +// utils/rpx.ts +import { Dimensions } from 'react-native'; + +const designWidth = 750; // The width of your design in rpx +const screenWidth = Dimensions.get('window').width; + +export const rpx = (rpxValue: number): number => { + return (screenWidth / designWidth) * rpxValue; +}; diff --git a/src/views/Home/HomeScreen.tsx b/src/views/Home/HomeScreen.tsx new file mode 100644 index 0000000..b68cced --- /dev/null +++ b/src/views/Home/HomeScreen.tsx @@ -0,0 +1,42 @@ +// src/views/HomeScreen.tsx +import React, { useEffect, useState } from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; +import http from '../../utils/http'; // Adjust the path as necessary +import { rpx } from '../../utils/rpx'; // Adjust the path as necessary +import NoDevice from './NoDevice'; +import NormaIndex from "./NormaIndex"; +const HomeScreen: React.FC = () => { + const [count, setCount] = useState(0); + const [data, setData] = useState(null); + const [pageIndex, setPageIndex] = useState(0); + + useEffect(() => { + // 发起 GET 请求 + http.get('/app/article/9') // Replace with your API endpoint + .then(response => { + // console.log(response); + + // setData(response); + }) + .catch(error => { + console.error('请求错误', error); + }); + }, []); + + return ( + + + {pageIndex === 0 && } + {pageIndex === 1 && } + + ); +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + }, +}); + +export default HomeScreen; diff --git a/src/views/Home/MiniMap.tsx b/src/views/Home/MiniMap.tsx new file mode 100644 index 0000000..f9478ab --- /dev/null +++ b/src/views/Home/MiniMap.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import { MapView, Marker } from 'react-native-amap3d'; +import { rpx } from '../../utils/rpx'; + +const MiniMap = () => { + return ( + + + + + + ); +}; + +// styles 保持不变 +const styles = StyleSheet.create({ + container: { + marginTop: rpx(44), + width: rpx(688), + height: rpx(380), + borderRadius: rpx(20), + overflow: 'hidden', // Ensure rounded corners are applied to the map + }, + map: { + width: '100%', + height: '100%', + }, +}); + +export default MiniMap; diff --git a/src/views/Home/NoDevice.tsx b/src/views/Home/NoDevice.tsx new file mode 100644 index 0000000..212b604 --- /dev/null +++ b/src/views/Home/NoDevice.tsx @@ -0,0 +1,106 @@ +import React, { useRef } from 'react'; +import { View, Text, StyleSheet, Animated, Image } from 'react-native'; +import { PanGestureHandler, State, GestureHandlerRootView, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; +import { rpx } from '../../utils/rpx'; // Adjust the path as necessary + +const Slider: React.FC = () => { + const translateX = useRef(new Animated.Value(0)).current; + + const bgColorInterpolate = translateX.interpolate({ + inputRange: [0, rpx(268)], + outputRange: ['#EBEBEB', 'blue'] + }); + + const opacityInterpolate = translateX.interpolate({ + inputRange: [0, rpx(268)], + outputRange: [1, 0] + }); + + const onGestureEvent = Animated.event( + [{ nativeEvent: { translationX: translateX } }], + { useNativeDriver: false } + ); + + const onHandlerStateChange = (event: any) => { + if (event.nativeEvent.oldState === State.ACTIVE) { + let toValue = 0; + if (event.nativeEvent.translationX > rpx(268) / 2) { + toValue = rpx(268); + } + + Animated.spring(translateX, { + toValue, + useNativeDriver: false + }).start(); + } + }; + + return ( + + + + + + + + + + + + 右滑启动 + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + car_Opne_box: { + justifyContent: 'center' + }, + car_Opne: { + width: rpx(268), + height: rpx(90), + flexDirection: 'row', + backgroundColor: "#EBEBEB", + alignItems: 'center', + paddingRight: rpx(30), + borderRadius: rpx(45) + }, + image: { + width: rpx(86), + height: rpx(86) + } +}); + +export default Slider; \ No newline at end of file diff --git a/src/views/Home/NormaIndex.tsx b/src/views/Home/NormaIndex.tsx new file mode 100644 index 0000000..91a0a6b --- /dev/null +++ b/src/views/Home/NormaIndex.tsx @@ -0,0 +1,300 @@ + +import React, { useEffect, useState, useRef } from 'react'; +import { View, Text, StyleSheet, Image, PanResponder, Animated } from 'react-native'; +import http from '../../utils/http'; // 调整路径 +import { rpx } from '../../utils/rpx'; // Adjust the path as necessary +import Slider from "./slider" +import MiniMap from './MiniMap'; +// import Ionicons from 'react-native-vector-icons/Ionicons';//引入自定义图标库 +const NormaIndex: React.FC = () => { + const [count, setCount] = useState(0); + const [data, setData] = useState(null); + const translateX = useRef(new Animated.Value(0)).current; + const bgColor = useRef(new Animated.Value(0)).current; + + const panResponder = useRef( + PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event( + [ + null, + { dx: translateX } + ], + { useNativeDriver: false } + ), + onPanResponderRelease: (_, gestureState) => { + if (gestureState.dx > rpx(268) / 2) { + Animated.parallel([ + Animated.timing(translateX, { + toValue: rpx(268), + duration: 300, + useNativeDriver: false + }), + Animated.timing(bgColor, { + toValue: 1, + duration: 300, + useNativeDriver: false + }) + ]).start(); + } else { + Animated.parallel([ + Animated.timing(translateX, { + toValue: 0, + duration: 300, + useNativeDriver: false + }), + Animated.timing(bgColor, { + toValue: 0, + duration: 300, + useNativeDriver: false + }) + ]).start(); + } + } + }) + ).current; + + const bgColorInterpolate = bgColor.interpolate({ + inputRange: [0, 1], + outputRange: ['#EBEBEB', 'blue'] + }); + + const opacityInterpolate = translateX.interpolate({ + inputRange: [0, rpx(268)], + outputRange: [1, 0] + }); + useEffect(() => { + // 发起 GET 请求 + http.get('/app/article/9') // 替换为你的 API endpoint + .then(response => { + // console.log(response); + + // setData(response); + }) + .catch(error => { + console.error('请求错误', error); + }); + }, []); + + return ( + + + 朵VFLU-13762 + + + + + 110 + km + + + + 剩余里程 + + + + + 110 + km + + + + 剩余里程 + + + + + + + 90% + + + + + + + + 当前车辆状态：锁车 + + + + + + + + + + + + + 鸣笛寻车 + + + + + + 警报已开 + + + + + ); +}; + +const styles = StyleSheet.create({ + car_Opne_box: { + justifyContent: 'center' + }, + MiniMap:{ + marginTop:rpx(44) + }, + car_Opne: { + width: rpx(268), + height: rpx(90), + flexDirection: 'row', // 保持在一行中 + backgroundColor: "#EBEBEB", + alignItems: 'center', + paddingRight: rpx(30), + borderRadius: rpx(45) + }, + car_stause_li: { + width: rpx(136), + justifyContent: 'center' + }, + car_stause_box: { + marginTop: rpx(308), + flexDirection: 'row', // 保持在一行中 + justifyContent: 'space-around' + }, + infoBox: { + + marginTop: rpx(66), + flexDirection: 'row', // 保持在一行中 + // alignItems:'center', + justifyContent: 'space-between' + }, + carBox: { + width: rpx(440), + position: 'absolute', + + top: rpx(20), + left: rpx(124), + zIndex: 0, + }, + Bind_type: { + flexDirection: 'row', // 保持在一行中 + + width: rpx(272), + height: rpx(60), + backgroundColor: '#fff', + borderRadius: rpx(30), + alignItems: 'center', + }, + txtbox: { + width: rpx(440), + justifyContent: 'center', + flexDirection: 'row', // 保持在一行中 + alignItems: 'center', // 垂直居中对齐 + }, + txt: { + marginLeft: rpx(14), // 为了给圆形和文本之间留出一些间距 + fontSize: rpx(28), + fontWeight: '400', + color: '#3D3D3D', + }, + yuan: { + width: rpx(22), + height: rpx(22), + borderRadius: rpx(11), + backgroundColor: 'rgba(255, 130, 130, 1)', + }, + eleTypeTxt: { + position: 'absolute', + top: rpx(16), + left: rpx(6), + fontSize: rpx(32), + color: '#3D3D3D', + fontWeight: 'bold' + }, + eleBox: { + paddingTop: rpx(14), + paddingRight: rpx(6), + paddingBottom: rpx(6), + paddingLeft: rpx(6), + width: rpx(86), + height: rpx(166), + borderRadius: rpx(16), + backgroundColor: '#fff' + }, + eleType: { + width: '100%', + height: '100%', + borderRadius: rpx(16), + backgroundColor: 'rgba(89,202,112,0.5)' + }, + titBox: { + + }, + + KmLi_bot: { + marginTop: rpx(4), + flexDirection: 'row', // 保持在一行中 + alignItems: 'center', // 垂直居中对齐 + }, + KmLi_tits1: { + marginLeft: rpx(4), + fontSize: rpx(28), + color: '#808080', + }, + container: { + width: '100%', + height: '100%', + + backgroundColor: 'rgba(230,248,253,0.5)', + padding: rpx(32), + }, + KmBox: { + marginTop: rpx(28), + width: '100%', + + flexDirection: 'row', // 保持在一行中 + alignItems: 'center', // 垂直居中对齐 + justifyContent: 'space-between', + }, + KmLi: { + // width: '50%', + + }, + + KmLi_tits: { + paddingBottom: rpx(10), + fontSize: rpx(24), + color: '#3D3D3D', + // fontWeight:'bold' + }, + KmLi_top: { + width: '100%', + + flexDirection: 'row', + flexWrap: 'nowrap', + verticalAlign: 'bottom', + alignItems: "flex-end", + }, + + titTxt: { + fontSize: rpx(48), + color: '#3D3D3D', + fontWeight: 'bold' + } + +}); + + +export default NormaIndex; diff --git a/src/views/Home/slider.tsx b/src/views/Home/slider.tsx new file mode 100644 index 0000000..d39ebfd --- /dev/null +++ b/src/views/Home/slider.tsx @@ -0,0 +1,170 @@ +import React, { useRef, useEffect, useState } from 'react'; +import { View, Text, StyleSheet, Animated, Image, PanResponder } from 'react-native'; +import { rpx } from '../../utils/rpx'; // 根据需要调整路径 + +const Slider: React.FC = () => { + const translateX = useRef(new Animated.Value(0)).current; + const maxWidth = rpx(180); // 根据需要调整最大宽度 + const buttonWidth = rpx(86); // 按钮图片的宽度 + const [iconOpacity, setIconOpacity] = useState(1); // 初始透明度为1 + + // 初始化 PanResponder + const panResponder = useRef( + PanResponder.create({ + onMoveShouldSetPanResponder: (_, gestureState) => { + return Math.abs(gestureState.dx) > 20; // 调整灵敏度阈值 + }, + onPanResponderMove: (_, gestureState) => { + const newTranslateX = Math.max(0, Math.min(maxWidth, translateX.__getValue() + gestureState.dx)); + translateX.setValue(newTranslateX); // 更新滑动值 + }, + onPanResponderRelease: (_, gestureState) => { + let toValue = 0; + + // 判断滑动方向和滑动距离 + const threshold = maxWidth / 4; // 调整滑动阈值 + if (gestureState.dx > threshold) { + toValue = maxWidth; // 滑动超过阈值则解锁 + } else if (gestureState.dx < -threshold) { + toValue = 0; // 从右向左滑动超过阈值则返回 + } else { + toValue = translateX.__getValue() > threshold ? maxWidth : 0; // 否则根据当前位置判断 + } + + Animated.timing(translateX, { + toValue, + duration: 300, + useNativeDriver: false, + }).start(); + }, + }) + ).current; + + // 计算背景色的宽度为当前滑动值加上按钮的宽度 + const backgroundColorWidth = translateX.interpolate({ + inputRange: [0, maxWidth], + outputRange: [0, maxWidth + buttonWidth], // 背景色的宽度加上按钮的宽度 + extrapolate: 'clamp', + }); + + // 监听 translateX 的变化 + useEffect(() => { + const listenerId = translateX.addListener(({ value }) => { + // 根据 translateX 的值设置图标的透明度 + const newOpacity = value < maxWidth ? (1 - value / maxWidth) : 0; // 透明度随滑动而变化 + setIconOpacity(newOpacity); // 更新透明度 + }); + + return () => { + translateX.removeListener(listenerId); // 清理监听 + }; + }, [translateX]); + + return ( + + + {/* 已划过区域背景色 */} + + {/* 默认背景色 */} + + + {/* 拖动按钮 */} + + + + + {/* 最右边的图标 */} + + + 右滑启动 + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + car_Opne_box: { + justifyContent: 'center', + width: rpx(268), + height: rpx(90), + position: 'relative', + borderRadius: rpx(45), + overflow: 'hidden', + }, + background: { + height: '100%', + borderRadius: rpx(45), + position: 'absolute', + left: 0, + top: 0, + }, + defaultBackground: { + width: rpx(268), + height: '100%', + backgroundColor: '#EBEBEB', // 保持未滑动区域的默认颜色 + borderRadius: rpx(45), + }, + imageContainer: { + width: rpx(86), // 使用按钮的实际宽度 + height: rpx(86), + position: 'absolute', + top: '50%', + left: 0, + marginTop: -rpx(43), + zIndex: 3, // 设置 zIndex，使其在最上层 + }, + imageContent: { + width: '100%', + height: '100%', + }, + icon: { + width: rpx(32), + height: rpx(32), + position: 'absolute', + top: '50%', + right: rpx(30), + marginTop: -rpx(16), + zIndex: 2, // 确保最右边的图标在最上面 + }, + text: { + fontSize: rpx(32), + color: '#3D3D3D', + textAlign: 'center', + marginTop: rpx(24), + }, +}); + +export default Slider; diff --git a/src/views/ProfileScreen.jsx b/src/views/ProfileScreen.jsx new file mode 100644 index 0000000..2826aa0 --- /dev/null +++ b/src/views/ProfileScreen.jsx @@ -0,0 +1,24 @@ +// src/views/ShopScreen.tsx +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const ShopScreen = () => { + return ( + + Shop Screen + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default ShopScreen; + + + diff --git a/src/views/ShopScreen.jsx b/src/views/ShopScreen.jsx new file mode 100644 index 0000000..b0f716f --- /dev/null +++ b/src/views/ShopScreen.jsx @@ -0,0 +1,21 @@ +// src/views/ProfileScreen.tsx +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const ProfileScreen = () => { + return ( + + Profile Screen + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default ProfileScreen;