From 39ed2e9ae2d7f74a771f4d1de039974e0bfa2df9 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Sat, 9 Nov 2024 18:02:10 +0800
Subject: [PATCH] 11
---
src/views/Home/MiniMap.tsx | 35 +++++--
src/views/Home/NormaIndex.tsx | 184 ++++++++++++++++++++--------------
2 files changed, 131 insertions(+), 88 deletions(-)
diff --git a/src/views/Home/MiniMap.tsx b/src/views/Home/MiniMap.tsx
index f9478ab..1ee270d 100644
--- a/src/views/Home/MiniMap.tsx
+++ b/src/views/Home/MiniMap.tsx
@@ -1,28 +1,43 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { MapView, Marker } from 'react-native-amap3d';
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d';
import { rpx } from '../../utils/rpx';
const MiniMap = () => {
+ useEffect(() => {
+ AMapSdk.init(
+ Platform.select({
+ android: "812efd3a950ba3675f928630302c6463",
+ })
+ );
+ }, []);
+
+ // Marker 的坐标
+ const latitude = 26.95500669;
+ const longitude = 120.32736769;
+ const imageUrl = "https://lxnapi.ccttiot.com/bike/img/static/uRx1B8B8acbquF2TO7Ry";
+
return (
+ {/* 添加 Marker */}
diff --git a/src/views/Home/NormaIndex.tsx b/src/views/Home/NormaIndex.tsx
index 91a0a6b..3090180 100644
--- a/src/views/Home/NormaIndex.tsx
+++ b/src/views/Home/NormaIndex.tsx
@@ -1,25 +1,24 @@
-
import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, StyleSheet, Image, PanResponder, Animated } from 'react-native';
+import { View, Text, StyleSheet, Image, PanResponder, Animated, ScrollView, TouchableOpacity } from 'react-native';
import http from '../../utils/http'; // 调整路径
import { rpx } from '../../utils/rpx'; // Adjust the path as necessary
-import Slider from "./slider"
+import Slider from "./slider";
import MiniMap from './MiniMap';
-// import Ionicons from 'react-native-vector-icons/Ionicons';//引入自定义图标库
+import { useNavigation } from '@react-navigation/native';
const NormaIndex: React.FC = () => {
+ const navigation = useNavigation(); // 获取导航实例
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 handleImagePress = () => {
+ navigation.navigate('VehicleSettings'); // 跳转到车辆设置页面
+ };
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event(
- [
- null,
- { dx: translateX }
- ],
+ [null, { dx: translateX }],
{ useNativeDriver: false }
),
onPanResponderRelease: (_, gestureState) => {
@@ -63,13 +62,12 @@ const NormaIndex: React.FC = () => {
inputRange: [0, rpx(268)],
outputRange: [1, 0]
});
+
useEffect(() => {
// 发起 GET 请求
http.get('/app/article/9') // 替换为你的 API endpoint
.then(response => {
- // console.log(response);
-
- // setData(response);
+ // setData(response); // Uncomment when API response is needed
})
.catch(error => {
console.error('请求错误', error);
@@ -77,83 +75,111 @@ const NormaIndex: React.FC = () => {
}, []);
return (
-
-
- 朵VFLU-13762
-
-
-
-
- 110
- km
+
+
+
+ 朵VFLU-13762
+
+
+
+
+ 110
+ km
+
+
+
+ 剩余里程
+
-
-
+
+ 110
+ km
+
+
+
+ 剩余里程
+
+
+
+
+
+
+ 90%
+
+
+
+
+
+
+ 当前车辆状态：锁车
+
+
+
+
- 剩余里程
+
-
-
- 110
- km
+
+
+
+ 鸣笛寻车
-
-
- 剩余里程
+
+
+
+ 警报已开
+
+
+
+
+
+
+
+
+
-
-
-
- 90%
-
-
-
-
-
-
-
- 当前车辆状态：锁车
-
-
-
-
-
-
-
-
-
-
-
-
- 鸣笛寻车
-
-
-
-
-
- 警报已开
-
-
-
-
+
);
};
-
const styles = StyleSheet.create({
+ scrollContent: {
+ flexGrow: 1, // This ensures the content expands to fill the available space
+ },
+ otherSet: {
+ marginTop: rpx(30),
+ // display:f,\
+ flexDirection: 'row', // 保持在一行中
+ justifyContent: 'space-between'
+
+ },
+ otherImg: {
+ width: rpx(328),
+ height: rpx(160),
+ },
+ carSet: {
+ marginTop: rpx(30),
+ width: rpx(688),
+ height: rpx(380),
+ },
car_Opne_box: {
justifyContent: 'center'
},
- MiniMap:{
- marginTop:rpx(44)
+ MiniMap: {
+ // marginTop:rpx(44),
+ marginBottom: rpx(44),
},
car_Opne: {
width: rpx(268),
@@ -254,11 +280,13 @@ const styles = StyleSheet.create({
color: '#808080',
},
container: {
- width: '100%',
- height: '100%',
+ flex: 1, // Ensure this takes full height of screen
+ // width: '100%',
+ // height: '100%',
- backgroundColor: 'rgba(230,248,253,0.5)',
+ backgroundColor: '#F3FCFF',
padding: rpx(32),
+ // paddingBottom:rpx(500),
},
KmBox: {
marginTop: rpx(28),