This commit is contained in:
tx 2024-11-09 18:02:10 +08:00
parent 2b160cae69
commit 39ed2e9ae2
2 changed files with 131 additions and 88 deletions

View File

@ -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 (
<View style={styles.container}>
<MapView
style={styles.map}
mapType={MapType.Standard} // 测试使用标准地图
zoomControlsEnabled={false} // 禁用加减缩放按钮
initialCameraPosition={{
target: {
latitude: 39.9042,
longitude: 116.4074,
latitude,
longitude,
},
zoom: 15, // 缩放级别
zoom: 15,
}}
>
{/* 添加 Marker */}
<Marker
position={{
latitude: 39.9042,
longitude: 116.4074,
latitude,
longitude,
}}
icon={{ uri: imageUrl }} // 设置 Marker 图标
/>
</MapView>
</View>

View File

@ -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 (
<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>
<ScrollView contentContainerStyle={styles.scrollContent}>
<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_bot}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }}
<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 style={styles.KmLi_tits1}> </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.KmLi}>
<View style={styles.KmLi_top}>
<Text style={styles.titTxt}>110 </Text>
<Text style={styles.KmLi_tits}>km </Text>
<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>
<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>
<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 />
<TouchableOpacity onPress={handleImagePress}>
<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>
<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>
</ScrollView>
);
};
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),