chuangte/BikeApp_demo
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
tx 2024-11-07 17:47:25 +08:00
parent bbaa67c0de
commit 2b160cae69
13 changed files with 1206 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"java.configuration.updateBuildConfiguration": "interactive"
}

176
App.tsx
View File

@ -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<RootStackParamList>();
function App() {
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function App(): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen
name="爱车"
component={HomeScreens}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/unny4QdTukoNl8fZYtkf' }}
style={{ width: size, height: size, tintColor: color }}
resizeMode="contain"
/>
),
}}
/>
<Tab.Screen
name="商城"
component={ShopScreens}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uqJNRvkwMS4ndouxoYlX' }}
style={{ width: size, height: size, tintColor: color }}
resizeMode="contain"
/>
),
}}
/>
<Tab.Screen
name="个人中心"
component={ProfileScreens}
options={{
tabBarIcon: ({ color, size }) => (
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uroSSfFVSob2kEvqTaD4' }}
style={{ width: size, height: size, tintColor: color }}
resizeMode="contain"
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
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',
},
});

370
package-lock.json generated
View File

@ -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",

9
package.json
View File

@ -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",

41
src/utils/http.ts Normal file
View File

@ -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;

9
src/utils/rpx.ts Normal file
View File

@ -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;
};

42
src/views/Home/HomeScreen.tsx Normal file
View File

@ -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 (
<View style={styles.container}>
{pageIndex === 0 && <NormaIndex />}
{pageIndex === 1 && <NoDevice />}
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
},
});
export default HomeScreen;

47
src/views/Home/MiniMap.tsx Normal file
View File

@ -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 (
<View style={styles.container}>
<MapView
style={styles.map}
initialCameraPosition={{
target: {
latitude: 39.9042,
longitude: 116.4074,
},
zoom: 15, // 缩放级别
}}
>
<Marker
position={{
latitude: 39.9042,
longitude: 116.4074,
}}
/>
</MapView>
</View>
);
};
// 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;

106
src/views/Home/NoDevice.tsx Normal file
View File

@ -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<PanGestureHandlerGestureEvent>(
[{ 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 (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.car_Opne_box}>
<Animated.View
style={[
styles.car_Opne,
{ backgroundColor: bgColorInterpolate }
]}
>
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}
>
<Animated.View style={{
transform: [{
translateX: translateX.interpolate({
inputRange: [0, rpx(268)],
outputRange: [0, rpx(268)],
extrapolate: 'clamp' // 限制滑动范围
})
}]
}}>
<Animated.Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uY9tYXXZztuE1VTLDl5y' }}
style={[
styles.image,
{ opacity: opacityInterpolate }
]}
/>
</Animated.View>
</PanGestureHandler>
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uEJob4XbADaL9ohOTVTL' }}
style={{ width: rpx(32), height: rpx(32), marginLeft: 'auto' }}
/>
</Animated.View>
<Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>右滑启动</Text>
</View>
</View>
</GestureHandlerRootView>
);
};
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;

300
src/views/Home/NormaIndex.tsx Normal file
View File

@ -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 (
<View style={styles.container}>
<View style={styles.titBox}>
<Text style={styles.titTxt}>朵VFLU-13762</Text>
</View>
<View style={styles.KmBox}>
<View style={styles.KmLi}>
<View style={styles.KmLi_top}>
<Text style={styles.titTxt}>110 </Text>
<Text style={styles.KmLi_tits}>km </Text>
</View>
<View style={styles.KmLi_bot}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }}
style={{ width: rpx(32), height: rpx(32) }} />
<Text style={styles.KmLi_tits1}>剩余里程 </Text>
</View>
</View>
<View style={styles.KmLi}>
<View style={styles.KmLi_top}>
<Text style={styles.titTxt}>110 </Text>
<Text style={styles.KmLi_tits}>km </Text>
</View>
<View style={styles.KmLi_bot}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }}
style={{ width: rpx(32), height: rpx(32) }} />
<Text style={styles.KmLi_tits1}>剩余里程 </Text>
</View>
</View>
</View>
<View style={styles.infoBox}>
<View style={styles.eleBox}>
<View style={styles.eleType}>
<Text style={styles.eleTypeTxt}>90%</Text>
</View>
</View>
<View style={styles.carBox}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }}
style={{ width: rpx(440), height: rpx(340) }} />
<View style={styles.txtbox}>
<View style={styles.yuan}></View>
<Text style={styles.txt}>
当前车辆状态：锁车
</Text>
</View>
</View>
<View style={styles.Bind_type}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uQdjlI2DLfXmABfynycn' }}
style={{ width: rpx(32), height: rpx(32) }} />
<Text></Text>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uLizPj6UxdjBsiqhxZB8' }}
style={{ width: rpx(60), height: rpx(60), marginLeft: 'auto' }} />
</View>
</View>
<View style={styles.car_stause_box}>
<View style={styles.car_stause_li}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uro1vIU1WydjNWgi7PUg' }}
style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} />
<Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>鸣笛寻车</Text>
</View>
<Slider></Slider>
<View style={styles.car_stause_li}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVpJNxwWXlyXt4IdHQoe' }}
style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} />
<Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>警报已开</Text>
</View>
</View>
<MiniMap ></MiniMap>
</View>
);
};
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;

170
src/views/Home/slider.tsx Normal file
View File

@ -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 (
<View style={styles.container}>
<View style={styles.car_Opne_box}>
{/* 已划过区域背景色 */}
<Animated.View
style={[
styles.background,
{
width: backgroundColorWidth, // 使用计算的宽度
backgroundColor: '#4297F3', // 设置已滑动区域的背景色
zIndex: 1, // 确保背景在后面
}
]}
/>
{/* 默认背景色 */}
<View style={[styles.defaultBackground]} />
{/* 拖动按钮 */}
<Animated.View
{...panResponder.panHandlers}
style={[
styles.imageContainer,
{
transform: [{
translateX // 使用 translateX 进行平移
}],
zIndex: 2, // 确保按钮在最上层
}
]}
>
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uY9tYXXZztuE1VTLDl5y' }}
style={styles.imageContent}
/>
</Animated.View>
{/* 最右边的图标 */}
<Animated.Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uEJob4XbADaL9ohOTVTL' }}
style={[
styles.icon,
{ opacity: iconOpacity, zIndex: 2 } // 确保图标在按钮上面
]}
/>
</View>
<Text style={styles.text}>右滑启动</Text>
</View>
);
};
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;

24
src/views/ProfileScreen.jsx Normal file
View File

@ -0,0 +1,24 @@
// src/views/ShopScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ShopScreen = () => {
return (
<View style={styles.container}>
<Text>Shop Screen</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default ShopScreen;

21
src/views/ShopScreen.jsx Normal file
View File

@ -0,0 +1,21 @@
// src/views/ProfileScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ProfileScreen = () => {
return (
<View style={styles.container}>
<Text>Profile Screen</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default ProfileScreen;