tx/BikeApp_demoss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/Home/MiniMap.tsx
View File

@ -1,28 +1,43 @@
import React from 'react'; import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native';
import { MapView, Marker } from 'react-native-amap3d'; import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d';
import { rpx } from '../../utils/rpx'; import { rpx } from '../../utils/rpx';
const MiniMap = () => { 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 ( return (
<View style={styles.container}> <View style={styles.container}>
<MapView <MapView
style={styles.map} style={styles.map}
mapType={MapType.Standard} // 测试使用标准地图
zoomControlsEnabled={false} // 禁用加减缩放按钮
initialCameraPosition={{ initialCameraPosition={{
target: { target: {
latitude: 39.9042, latitude,
longitude: 116.4074, longitude,
}, },
zoom: 15, // 缩放级别 zoom: 15,
}} }}
> >
{/* 添加 Marker */}
<Marker <Marker
position={{ position={{
latitude: 39.9042, latitude,
longitude: 116.4074, longitude,
}} }}
icon={{ uri: imageUrl }} // 设置 Marker 图标
/> />
</MapView> </MapView>
</View> </View>

90
src/views/Home/NormaIndex.tsx
View File

@ -1,25 +1,24 @@
import React, { useEffect, useState, useRef } from 'react'; 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 http from '../../utils/http'; // 调整路径
import { rpx } from '../../utils/rpx'; // Adjust the path as necessary import { rpx } from '../../utils/rpx'; // Adjust the path as necessary
import Slider from "./slider" import Slider from "./slider";
import MiniMap from './MiniMap'; import MiniMap from './MiniMap';
// import Ionicons from 'react-native-vector-icons/Ionicons';//引入自定义图标库 import { useNavigation } from '@react-navigation/native';
const NormaIndex: React.FC = () => { const NormaIndex: React.FC = () => {
const navigation = useNavigation(); // 获取导航实例
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const [data, setData] = useState(null); const [data, setData] = useState(null);
const translateX = useRef(new Animated.Value(0)).current; const translateX = useRef(new Animated.Value(0)).current;
const bgColor = useRef(new Animated.Value(0)).current; const bgColor = useRef(new Animated.Value(0)).current;
const handleImagePress = () => {
navigation.navigate('VehicleSettings'); // 跳转到车辆设置页面
};
const panResponder = useRef( const panResponder = useRef(
PanResponder.create({ PanResponder.create({
onStartShouldSetPanResponder: () => true, onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event( onPanResponderMove: Animated.event(
[ [null, { dx: translateX }],
null,
{ dx: translateX }
],
{ useNativeDriver: false } { useNativeDriver: false }
), ),
onPanResponderRelease: (_, gestureState) => { onPanResponderRelease: (_, gestureState) => {
@ -63,13 +62,12 @@ const NormaIndex: React.FC = () => {
inputRange: [0, rpx(268)], inputRange: [0, rpx(268)],
outputRange: [1, 0] outputRange: [1, 0]
}); });
useEffect(() => { useEffect(() => {
// 发起 GET 请求 // 发起 GET 请求
http.get('/app/article/9') // 替换为你的 API endpoint http.get('/app/article/9') // 替换为你的 API endpoint
.then(response => { .then(response => {
// console.log(response); // setData(response); // Uncomment when API response is needed
// setData(response);
}) })
.catch(error => { .catch(error => {
console.error('请求错误', error); console.error('请求错误', error);
@ -77,6 +75,7 @@ const NormaIndex: React.FC = () => {
}, []); }, []);
return ( return (
<ScrollView contentContainerStyle={styles.scrollContent}>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.titBox}> <View style={styles.titBox}>
<Text style={styles.titTxt}>朵VFLU-13762</Text> <Text style={styles.titTxt}>朵VFLU-13762</Text>
@ -84,24 +83,24 @@ const NormaIndex: React.FC = () => {
<View style={styles.KmBox}> <View style={styles.KmBox}>
<View style={styles.KmLi}> <View style={styles.KmLi}>
<View style={styles.KmLi_top}> <View style={styles.KmLi_top}>
<Text style={styles.titTxt}>110 </Text> <Text style={styles.titTxt}>110</Text>
<Text style={styles.KmLi_tits}>km </Text> <Text style={styles.KmLi_tits}>km</Text>
</View> </View>
<View style={styles.KmLi_bot}> <View style={styles.KmLi_bot}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }} <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }}
style={{ width: rpx(32), height: rpx(32) }} /> style={{ width: rpx(32), height: rpx(32) }} />
<Text style={styles.KmLi_tits1}>剩余里程 </Text> <Text style={styles.KmLi_tits1}>剩余里程</Text>
</View> </View>
</View> </View>
<View style={styles.KmLi}> <View style={styles.KmLi}>
<View style={styles.KmLi_top}> <View style={styles.KmLi_top}>
<Text style={styles.titTxt}>110 </Text> <Text style={styles.titTxt}>110</Text>
<Text style={styles.KmLi_tits}>km </Text> <Text style={styles.KmLi_tits}>km</Text>
</View> </View>
<View style={styles.KmLi_bot}> <View style={styles.KmLi_bot}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }} <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uDg93bCzlPFiFBtS71Al' }}
style={{ width: rpx(32), height: rpx(32) }} /> style={{ width: rpx(32), height: rpx(32) }} />
<Text style={styles.KmLi_tits1}>剩余里程 </Text> <Text style={styles.KmLi_tits1}>剩余里程</Text>
</View> </View>
</View> </View>
</View> </View>
@ -116,15 +115,12 @@ const NormaIndex: React.FC = () => {
style={{ width: rpx(440), height: rpx(340) }} /> style={{ width: rpx(440), height: rpx(340) }} />
<View style={styles.txtbox}> <View style={styles.txtbox}>
<View style={styles.yuan}></View> <View style={styles.yuan}></View>
<Text style={styles.txt}> <Text style={styles.txt}>当前车辆状态：锁车</Text>
当前车辆状态：锁车
</Text>
</View> </View>
</View> </View>
<View style={styles.Bind_type}> <View style={styles.Bind_type}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uQdjlI2DLfXmABfynycn' }} <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uQdjlI2DLfXmABfynycn' }}
style={{ width: rpx(32), height: rpx(32) }} /> style={{ width: rpx(32), height: rpx(32) }} />
<Text></Text>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uLizPj6UxdjBsiqhxZB8' }} <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uLizPj6UxdjBsiqhxZB8' }}
style={{ width: rpx(60), height: rpx(60), marginLeft: 'auto' }} /> style={{ width: rpx(60), height: rpx(60), marginLeft: 'auto' }} />
</View> </View>
@ -135,25 +131,55 @@ const NormaIndex: React.FC = () => {
style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} /> style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} />
<Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>鸣笛寻车</Text> <Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>鸣笛寻车</Text>
</View> </View>
<Slider />
<Slider></Slider>
<View style={styles.car_stause_li}> <View style={styles.car_stause_li}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVpJNxwWXlyXt4IdHQoe' }} <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVpJNxwWXlyXt4IdHQoe' }}
style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} /> style={{ width: rpx(90), height: rpx(90), marginLeft: rpx(18) }} />
<Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>警报已开</Text> <Text style={{ fontSize: rpx(32), color: '#3D3D3D', textAlign: 'center', marginTop: rpx(24) }}>警报已开</Text>
</View> </View>
</View> </View>
<MiniMap ></MiniMap> <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>
</ScrollView>
); );
}; };
const styles = StyleSheet.create({ 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: { car_Opne_box: {
justifyContent: 'center' justifyContent: 'center'
}, },
MiniMap:{ MiniMap: {
marginTop:rpx(44) // marginTop:rpx(44),
marginBottom: rpx(44),
}, },
car_Opne: { car_Opne: {
width: rpx(268), width: rpx(268),
@ -254,11 +280,13 @@ const styles = StyleSheet.create({
color: '#808080', color: '#808080',
}, },
container: { container: {
width: '100%', flex: 1, // Ensure this takes full height of screen
height: '100%', // width: '100%',
// height: '100%',
backgroundColor: 'rgba(230,248,253,0.5)', backgroundColor: '#F3FCFF',
padding: rpx(32), padding: rpx(32),
// paddingBottom:rpx(500),
}, },
KmBox: { KmBox: {
marginTop: rpx(28), marginTop: rpx(28),