11
This commit is contained in:
parent
2b160cae69
commit
39ed2e9ae2
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
<MiniMap />
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user