11

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 { 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 HomeStackNavigator from './src/views/HomeStackNavigator';
-// import { AMapSdk } from 'react-native-amap3d';
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
-
-// AMapSdk.init(Platform.select({
-//   android: '812efd3a950ba3675f928630302c6463',
- 
-// }));
 
 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}
+          component={HomeStackNavigator}
-          options={{
+          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;

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 {

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"

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin',
+  ],
 };

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

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 请求

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} // 测试使用标准地图
+        mapType={MapType.Standard}
-        zoomControlsEnabled={false} // 禁用加减缩放按钮
+        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;

src/views/Home/NoDevice.tsx

@@ -1,106 +1,88 @@
 import React, { useRef } from 'react';
-import { View, Text, StyleSheet, Animated, Image } from 'react-native';
+import { View, Text, StyleSheet, Animated, Image,TouchableOpacity} from 'react-native';
-import { PanGestureHandler, State, GestureHandlerRootView, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+
 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 handlePress = () => {
-    const translateX = useRef(new Animated.Value(0)).current;
+     
-
+        navigation.navigate('BindIndex');
-    const bgColorInterpolate = translateX.interpolate({
+        // console.log(navigation);
-        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.container}>
+            <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.Image} />
-                <View style={styles.car_Opne_box}>
+            <View style={styles.txtbox}>
-                    <Animated.View
+                <View style={styles.yuan}></View>
-                        style={[
+                <Text style={styles.txt}>当前车辆状态：锁车</Text>
-                            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>
+            <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: {
+    add: {
-        justifyContent: 'center'
+        width: rpx(34),
+        height: rpx(34),
     },
-    car_Opne: {
+    txtbox: {
-        width: rpx(268),
+        width: rpx(440),
-        height: rpx(90),
+        justifyContent: 'center',
-        flexDirection: 'row',
+        flexDirection: 'row', // 保持在一行中
-        backgroundColor: "#EBEBEB",
+        alignItems: 'center', // 垂直居中对齐
-        alignItems: 'center',
-        paddingRight: rpx(30),
-        borderRadius: rpx(45)
     },
-    image: {
+    txt: {
-        width: rpx(86),
+        marginLeft: rpx(14), // 为了给圆形和文本之间留出一些间距
-        height: rpx(86)
+        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;

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}
+                        style={styles.carSet}
-                    />
-                </TouchableOpacity> */}
-                 <Image
-                        source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/ucYQHQ2Ep4odL8JpbtfT' }}
-                        style={styles.otherSet}
                     />
+                </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>
     );

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',
+  },
+
+});