11

2024-11-12 09:34:25 +08:00 · 2024-11-12 09:34:25 +08:00 · 41c2159c23
commit 41c2159c23
parent af1d91c901
11 changed files with 1341 additions and 2078 deletions
--- a/App.tsx
+++ b/App.tsx
@ -1,19 +1,13 @@
 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 { View, StyleSheet, Image, Platform } from 'react-native';
 import ShopScreens from './src/views/ShopScreen';
 import ProfileScreens from './src/views/ProfileScreen';
 import 'react-native-gesture-handler';
 import { enableScreens } from 'react-native-screens';
-
-// import { AMapSdk } from 'react-native-amap3d';
-
-// AMapSdk.init(Platform.select({
-//   android: '812efd3a950ba3675f928630302c6463',
- 
-// }));
+import HomeStackNavigator from './src/views/HomeStackNavigator';
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

 enableScreens();

@ -26,13 +20,18 @@ type RootStackParamList = {
 const Tab = createBottomTabNavigator<RootStackParamList>();

 function App() {
+  const getTabBarVisibility = (route: any) => {
+    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
+    const showOnScreens = ['Home']; // 只在 Home 页面显示底部导航栏
+    return showOnScreens.includes(routeName) ? 'flex' : 'none';
+  };
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: false }}>
-        <Tab.Screen
+      <Tab.Screen
          name="爱车"
-          component={HomeScreens}
-          options={{
+          component={HomeStackNavigator}
+          options={({ route }) => ({
            tabBarIcon: ({ color, size }) => (
              <Image
                source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/unny4QdTukoNl8fZYtkf' }}
@ -40,7 +39,10 @@ function App() {
                resizeMode="contain"
              />
            ),
-          }}
+            tabBarStyle: {
+              display: getTabBarVisibility(route)
+            }
+          })}
        />
        <Tab.Screen
          name="商城"
@ -81,4 +83,4 @@ const styles = StyleSheet.create({
  },
 });

-export default App;
+export default App;
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -76,6 +76,7 @@ android {

    namespace "com.bikeapp_demo"
    defaultConfig {
+         missingDimensionStrategy 'react-native-camera', 'general'
        applicationId "com.bikeapp_demo"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
@ -107,7 +108,9 @@ android {
 dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
-
+      implementation "com.google.android.gms:play-services-vision:20.1.3"
+    implementation "com.google.android.gms:play-services-vision-common:19.1.3"
+    implementation project(':react-native-camera')
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@ -6,6 +6,8 @@
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.CAMERA" />
+<uses-permission android:name="android.permission.VIBRATE"/>

    <application
      android:name=".MainApplication"
--- a/babel.config.js
+++ b/babel.config.js
@ -1,3 +1,6 @@
 module.exports = {
  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin',
+  ],
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,11 +12,17 @@
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/stack": "^6.3.8",
    "axios": "^1.7.7",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-amap3d": "^3.0.7",
+    "react-native-camera": "^4.2.1",
    "react-native-gesture-handler": "^2.20.2",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-permissions": "^5.1.0",
+    "react-native-qrcode-scanner": "^1.5.5",
+    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.35.0"
  },
--- a/src/views/Home/HomeScreen.tsx
+++ b/src/views/Home/HomeScreen.tsx
@ -8,7 +8,7 @@ import NormaIndex from "./NormaIndex";
 const HomeScreen: React.FC = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);
-  const [pageIndex, setPageIndex] = useState(0);
+  const [pageIndex, setPageIndex] = useState(1);
 
  useEffect(() => {
    // 发起 GET 请求
--- a/src/views/Home/MiniMap.tsx
+++ b/src/views/Home/MiniMap.tsx
@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform,Text,Image } from 'react-native';
 import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d';
+import LinearGradient from 'react-native-linear-gradient';
 import { rpx } from '../../utils/rpx';

 const MiniMap = () => {
@ -12,17 +13,16 @@ const MiniMap = () => {
    );
  }, []);

-  // Marker 的坐标
  const latitude = 26.95500669;
  const longitude = 120.32736769;
  const imageUrl = "https://lxnapi.ccttiot.com/bike/img/static/uRx1B8B8acbquF2TO7Ry";
-  
+
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
-        mapType={MapType.Standard} // 测试使用标准地图
-        zoomControlsEnabled={false} // 禁用加减缩放按钮
+        mapType={MapType.Standard}
+        zoomControlsEnabled={false}
        initialCameraPosition={{
          target: {
            latitude,
@ -31,32 +31,119 @@ const MiniMap = () => {
          zoom: 15,
        }}
      >
-        {/* 添加 Marker */}
        <Marker
          position={{
            latitude,
            longitude,
          }}
-          icon={{ uri: imageUrl }} // 设置 Marker 图标
+          icon={{ uri: imageUrl }}
        />
      </MapView>
+      <LinearGradient
+        colors={[
+          'rgba(255,255,255,1)',
+          'rgba(255,255,255,1)',
+          'rgba(255,255,255,0)',
+        ]}
+        locations={[0, 0.8, 1]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        style={styles.mapTop}
+        pointerEvents="none"
+      >
+        <View style={styles.contentContainer}>
+          <View style={styles.cont_left}>
+            <View style={styles.cont_left_top}>
+              <Text style={styles.cont_left_top_txt}>
+                上次蓝牙连接位置
+              </Text>
+              <Text style={styles.updata}>
+                更新于 3分钟前
+              </Text>
+            </View>
+            <Text style={styles.cont_left_bot}>
+              福建省宁德市福鼎市海滨路200号靠近福鼎第四中学
+            </Text>
+          </View>
+          <View style={styles.cont_right}>
+            <Image 
+              source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uoWXZvZN5ynoS4CDFM4k' }}  // 替换成你的图标URL
+              style={styles.rightIcon}
+            />
+          </View>
+        </View>
+      </LinearGradient>
    </View>
  );
 };

-// styles 保持不变
 const styles = StyleSheet.create({
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: rpx(24),
+    height: '100%',
+  },
+  cont_left: {
+    flex: 1,
+    marginRight: rpx(20),
+  },
+  cont_left_top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: rpx(8),
+  },
+  cont_left_top_txt: {
+    fontWeight: '500',
+    fontSize: rpx(36),
+    color: '#3D3D3D',
+    marginRight: rpx(12),
+  },
+  updata: {
+    fontWeight: '400',
+    fontSize: rpx(24),
+    color: '#808080',
+  },
+  cont_left_bot: {
+    fontWeight: '400',
+    fontSize: rpx(24),
+    color: '#3D3D3D',
+    lineHeight: rpx(32),
+  },
+  cont_right: {
+    width: rpx(48),
+    height: rpx(48),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rightIcon: {
+    width: rpx(32),
+    height: rpx(32),
+  },
+ 
  container: {
    marginTop: rpx(44),
    width: rpx(688),
    height: rpx(380),
    borderRadius: rpx(20),
-    overflow: 'hidden', // Ensure rounded corners are applied to the map
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  mapTop: {
+    position: 'absolute',
+    left: rpx(0),
+    top: rpx(0),
+    width: rpx(688),
+    height: rpx(112),
+    zIndex: 999,
+    elevation: 3,
  },
  map: {
    width: '100%',
    height: '100%',
+    zIndex: 1,
  },
 });

-export default MiniMap;
+export default MiniMap;
--- a/src/views/Home/NoDevice.tsx
+++ b/src/views/Home/NoDevice.tsx
@ -1,106 +1,88 @@
 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 { View, Text, StyleSheet, Animated, Image,TouchableOpacity} from 'react-native';
+
 import { rpx } from '../../utils/rpx'; // Adjust the path as necessary
+import { useNavigation } from '@react-navigation/native';
+const NoDevice: React.FC = () => {
+    const navigation = useNavigation();

-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();
-        }
+    const handlePress = () => {
+     
+        navigation.navigate('BindIndex');
+        // console.log(navigation);
    };
-
    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 style={styles.container}>
+            <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.Image} />
+            <View style={styles.txtbox}>
+                <View style={styles.yuan}></View>
+                <Text style={styles.txt}>当前车辆状态：锁车</Text>
            </View>
-        </GestureHandlerRootView>
+            <TouchableOpacity onPress={handlePress}>
+            <View  style={styles.addcar}>
+                <Image style={styles.add} source={{uri:'https://lxnapi.ccttiot.com/bike/img/static/uiRPAn55nTvL0UUVslIS'}}></Image>
+                <Text style={styles.addTxt}>添加车辆</Text>
+                
+            </View>
+            </TouchableOpacity>
+        </View>
    );
 };

 const styles = StyleSheet.create({
    container: {
+        display: 'flex',
+        alignItems: 'center',
+
        flex: 1,
+        backgroundColor: '#F3FCFF',
+    },
+    addTxt: {
+        marginLeft:rpx(20),
+        fontWeight: '500',
+        color: '#ffffff',
+        fontSize: rpx(40),
+        marginRight: rpx(10), // 添加右边距，与图标保持间距
+    },
+    addcar: {
+        marginTop: rpx(122),
+        flexDirection: 'row', // 添加这行，使内容水平排列
+        alignItems: 'center',
        justifyContent: 'center',
-        alignItems: 'center',
+        width: rpx(641),
+        height: rpx(92),
+        backgroundColor: '#4297F3',
+        borderRadius: rpx(20),
    },
-    car_Opne_box: {
-        justifyContent: 'center'
+    add: {
+        width: rpx(34),
+        height: rpx(34),
    },
-    car_Opne: {
-        width: rpx(268),
-        height: rpx(90),
-        flexDirection: 'row',
-        backgroundColor: "#EBEBEB",
-        alignItems: 'center',
-        paddingRight: rpx(30),
-        borderRadius: rpx(45)
+    txtbox: {
+        width: rpx(440),
+        justifyContent: 'center',
+        flexDirection: 'row', // 保持在一行中
+        alignItems: 'center', // 垂直居中对齐
    },
-    image: {
-        width: rpx(86),
-        height: rpx(86)
+    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)',
+    },
+    Image: {
+        // marginLeft:rpx(156),
+        marginTop: rpx(178),
+        width: rpx(440),
+        height: rpx(340)
    }
+
 });

-export default Slider;
+export default NoDevice;
--- a/src/views/Home/NormaIndex.tsx
+++ b/src/views/Home/NormaIndex.tsx
@ -15,7 +15,9 @@ const NormaIndex: React.FC = () => {
    const navigation = useNavigation();

    const handlePress = () => {
-        navigation.navigate('deviceList'); // 确保 'deviceList' 是正确的页面名称
+     
+        navigation.navigate('DeviceList');
+        // console.log(navigation);
    };
    const panResponder = useRef(
        PanResponder.create({
@ -142,20 +144,18 @@ const NormaIndex: React.FC = () => {
                    </View>
                </View>
                <MiniMap />
-                {/* <TouchableOpacity onPress={handlePress}>
+                <TouchableOpacity onPress={handlePress}>
                    <Image
                        source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/ucYQHQ2Ep4odL8JpbtfT' }}
-                        style={styles.otherSet}
-                    />
-                </TouchableOpacity> */}
-                 <Image
-                        source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/ucYQHQ2Ep4odL8JpbtfT' }}
-                        style={styles.otherSet}
+                        style={styles.carSet}
                    />
+                </TouchableOpacity>
+               
                <View style={styles.otherSet}>
                    <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/ulDHhC4MrH3FO0AeTqVg' }} style={styles.otherImg} />
                    <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/u849NsNxdtzxhUkUJnfW' }} style={styles.otherImg} />
                </View>
+              
            </View>
        </ScrollView>
    );
--- a/src/views/device/deviceList.tsx
+++ b/src/views/device/deviceList.tsx
@ -1 +1,23 @@
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, Button } from 'react-native';
+import { useNavigation } from '@react-navigation/native';

+export default function DeviceList() {
+  const navigation = useNavigation();
+
+ 
+
+  return (
+    <View style={styles.container}>
+    
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+
+});