diff --git a/App.tsx b/App.tsx index 1d01c78..cdfe4e5 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { useEffect } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { View, StyleSheet, Image, Platform } from 'react-native'; @@ -9,7 +10,7 @@ import { enableScreens } from 'react-native-screens'; import HomeStackNavigator from './src/views/HomeStackNavigator'; import { getFocusedRouteNameFromRoute } from '@react-navigation/native'; import { rpx } from './src/utils/rpx'; - +import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d'; enableScreens(); type RootStackParamList = { @@ -21,6 +22,14 @@ type RootStackParamList = { const Tab = createBottomTabNavigator(); function App() { + useEffect(() => { + AMapSdk.init( + Platform.select({ + android: "812efd3a950ba3675f928630302c6463", + }) + ); + }, []); + const getTabBarVisibility = (route: any) => { const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home'; const showOnScreens = ['Home']; // 只在 Home 页面显示底部导航栏 diff --git a/android/app/build.gradle b/android/app/build.gradle index 9111aea..090eae7 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -75,6 +75,9 @@ android { compileSdk rootProject.ext.compileSdkVersion namespace "com.bikeapp_demo" + configurations { + all*.exclude group: 'com.amap.api', module: 'location' + } defaultConfig { missingDimensionStrategy 'react-native-camera', 'general' applicationId "com.bikeapp_demo" @@ -111,6 +114,8 @@ dependencies { 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') + implementation 'com.amap.api:3dmap:latest.integration' + implementation 'com.amap.api:location:latest.integration' if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index fc35d7c..bb4032f 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -9,6 +9,7 @@ + { + const PI = 3.14159265358979324; + const ee = 0.00669342162296594323; + const a = 6378245.0; + + let dLat = transformLat(lng - 105.0, lat - 35.0); + let dLng = transformLng(lng - 105.0, lat - 35.0); + + const radLat = lat / 180.0 * PI; + let magic = Math.sin(radLat); + magic = 1 - ee * magic * magic; + + const sqrtMagic = Math.sqrt(magic); + dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI); + dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI); + + return { + latitude: lat + dLat, + longitude: lng + dLng, + }; + }; + + function transformLat(x: number, y: number) { + let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); + ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0; + ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0; + return ret; + } + + function transformLng(x: number, y: number) { + let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); + ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0; + ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0; + return ret; + } + + const PI = 3.14159265358979324; \ No newline at end of file diff --git a/src/views/Home/MiniMap.tsx b/src/views/Home/MiniMap.tsx index 511e343..715dbd8 100644 --- a/src/views/Home/MiniMap.tsx +++ b/src/views/Home/MiniMap.tsx @@ -17,13 +17,13 @@ type NavigationProp = StackNavigationProp; const MiniMap = () => { const navigation = useNavigation(); - useEffect(() => { - AMapSdk.init( - Platform.select({ - android: "812efd3a950ba3675f928630302c6463", - }) - ); - }, []); + // useEffect(() => { + // AMapSdk.init( + // Platform.select({ + // android: "812efd3a950ba3675f928630302c6463", + // }) + // ); + // }, []); const handleMapPress = () => { navigation.navigate('DeviceMap'); diff --git a/src/views/Home/NoDevice.tsx b/src/views/Home/NoDevice.tsx index ba8c100..a8a2d9e 100644 --- a/src/views/Home/NoDevice.tsx +++ b/src/views/Home/NoDevice.tsx @@ -8,7 +8,7 @@ const NoDevice: React.FC = () => { const handlePress = () => { - navigation.navigate('BindIndex'); + navigation.navigate('BindIndex' as never); // console.log(navigation); }; return ( diff --git a/src/views/Home/NormaIndex.tsx b/src/views/Home/NormaIndex.tsx index 618d70e..c75e59e 100644 --- a/src/views/Home/NormaIndex.tsx +++ b/src/views/Home/NormaIndex.tsx @@ -23,6 +23,8 @@ type RootStackParamList = { Home: undefined; DeviceList: undefined; DeviceMap: undefined; + DeviceSet: undefined; + DeviceShare: undefined; // 添加其他页面的路由参数类型 }; @@ -39,10 +41,16 @@ const NormaIndex: React.FC = () => { const handlePress = () => { navigation.navigate('DeviceList'); }; + const toSet = () => { + navigation.navigate('DeviceSet'); + }; const toMap = () => { navigation.navigate('DeviceMap'); }; + const toShare = () => { + navigation.navigate('DeviceShare'); + }; const panResponder = useRef( PanResponder.create({ @@ -215,7 +223,7 @@ const NormaIndex: React.FC = () => { - + { + + + (); @@ -44,7 +54,7 @@ type Props = { export default function HomeStackNavigator({ navigation, route }: Props) { React.useEffect(() => { const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home'; - const hideTabBarRoutes = ['DeviceList', 'BindIndex', 'SnBind', 'BleBind', 'ConfirmBind', 'DeviceMap']; // 添加新的路由名 + const hideTabBarRoutes = ['DeviceList', 'BindIndex', 'SnBind', 'BleBind', 'ConfirmBind', 'DeviceMap', 'DeviceSet', 'UnlockSetting', 'BleDistance', 'DeviceShare']; // 添加新的路由名 const shouldHideTabBar = hideTabBarRoutes.includes(routeName); navigation.getParent()?.setOptions({ @@ -86,7 +96,32 @@ export default function HomeStackNavigator({ navigation, route }: Props) { name="DeviceMap" component={DeviceMap} options={createScreenOptions('设备位置')} - /> + /> + + + + + ); } \ No newline at end of file diff --git a/src/views/device/AddShare.tsx b/src/views/device/AddShare.tsx new file mode 100644 index 0000000..6e69e48 --- /dev/null +++ b/src/views/device/AddShare.tsx @@ -0,0 +1,354 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet, Image, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Modal } from 'react-native'; +import { rpx } from '../../utils/rpx'; + +const AddShare = () => { + const [phone, setPhone] = useState(''); + const [name, setName] = useState(''); + const [time, setTime] = useState(''); + const [showTimeModal, setShowTimeModal] = useState(false); + const [showBleInfo, setShowBleInfo] = useState(false); + const timeOptions = ['1天', '7天', '30天', '永久']; + const [allowBleLocation, setAllowBleLocation] = useState(true); + const handlePress = () => { + setShowTimeModal(true); + } + return ( + + + + + + + + + + + + + + + + setShowBleInfo(true)}> + + + 上次蓝牙连接位置 + + {allowBleLocation ? '允许' : '不允许'} + + + + + + + + + + 是否允许租赁人查看{'\n'}上次蓝牙连接位置 + + + + setAllowBleLocation(true)} + > + 允许 + + {allowBleLocation && } + + + + + setAllowBleLocation(false)} + > + 不允许 + + {!allowBleLocation && } + + + + + + setShowBleInfo(false)} + > + 确定 + + + + + + + + + setShowTimeModal(false)} + > + 取消 + + 选择有效期 + setShowTimeModal(false)} + > + 确定 + + + + + {timeOptions.map((option, index) => ( + { + setTime(option); + setShowTimeModal(false); + }} + > + + {option} + + + ))} + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F3FCFF', + alignItems: 'center', + }, + modalContainers: { + flex: 1, + justifyContent: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + paddingHorizontal: rpx(30), + }, + modalContents: { + backgroundColor: '#fff', + borderRadius: rpx(20), + alignItems: 'center', + paddingVertical: rpx(40), + padding:rpx(28) + }, + bleLocationImg: { + width: rpx(338), + height: rpx(338), + marginBottom: rpx(30), + }, + bleModalTitle: { + fontSize: rpx(36), + color: '#333', + textAlign: 'center', + lineHeight: rpx(50), + marginBottom: rpx(40), + }, + line: { + borderWidth: rpx(1), + borderColor: '#eee', + marginBottom: rpx(28) + }, + radioGroup: { + width: '100%', + paddingHorizontal: rpx(60), + marginBottom: rpx(40), + borderWidth: rpx(2), + borderColor: '#eee', + borderRadius: rpx(30), + paddingTop: rpx(28) + }, + radioItem: { + + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + marginBottom: rpx(30), + }, + radioCircle: { + width: rpx(44), + height: rpx(44), + borderRadius: rpx(22), + borderWidth: rpx(2), + borderColor: '#4297F3', + marginRight: rpx(20), + justifyContent: 'center', + alignItems: 'center', + }, + radioSelected: { + width: rpx(28), + height: rpx(28), + borderRadius: rpx(14), + backgroundColor: '#4297F3', + }, + radioText: { + fontSize: rpx(32), + color: '#333', + }, + confirmButton: { + width: rpx(560), + height: rpx(88), + backgroundColor: '#4297F3', + borderRadius: rpx(44), + justifyContent: 'center', + alignItems: 'center', + }, + confirmButtonText: { + fontSize: rpx(32), + color: '#fff', + fontWeight: '500', + }, + bleImg: { + width: rpx(88), + height: rpx(88), + }, + tit: { + fontSize: rpx(36), + color: '#1E1D20', + }, + txt: { + fontSize: rpx(36), + color: '#4297F3', + }, + bleInfo: { + marginTop: rpx(30), + width: rpx(688), + height: rpx(174), + backgroundColor: '#ffffff', + padding: rpx(44), + flexDirection: 'row', + // alignItems: 'center', + // justifyContent: 'center', + }, + bleInfoBox: { + paddingLeft: rpx(20), + }, + modalContainer: { + flex: 1, + justifyContent: 'flex-end', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalContent: { + backgroundColor: '#fff', + borderTopLeftRadius: rpx(20), + borderTopRightRadius: rpx(20), + paddingBottom: rpx(30), + }, + modalHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + height: rpx(100), + borderBottomWidth: 1, + borderBottomColor: '#eee', + paddingHorizontal: rpx(30), + }, + headerButton: { + padding: rpx(20), + }, + modalTitle: { + fontSize: rpx(32), + fontWeight: '500', + color: '#333', + }, + cancelText: { + fontSize: rpx(32), + color: '#666', + }, + confirmText: { + fontSize: rpx(32), + color: '#4297F3', + }, + optionsContainer: { + paddingHorizontal: rpx(30), + paddingTop: rpx(20), + alignItems: 'center', + }, + optionItem: { + height: rpx(100), + width: rpx(300), + justifyContent: 'center', + alignItems: 'center', + // paddingLeft: rpx(30), + borderRadius: rpx(16), + marginBottom: rpx(20), + }, + optionText: { + fontSize: rpx(32), + color: '#333', + }, + selectedItemBg: { + backgroundColor: '#F0F7FF', + }, + selectedOption: { + color: '#4297F3', + }, + IptBox: { + marginTop: rpx(30), + paddingHorizontal: rpx(30), + width: rpx(688), + height: rpx(128), + flexDirection: 'row', + alignItems: 'center', + backgroundColor: '#ffffff', + borderRadius: rpx(30), + + }, + input: { + flex: 1, + fontSize: rpx(36), + }, + phoneImg: { + width: rpx(54), + height: rpx(54), + } +}) +export default AddShare; \ No newline at end of file diff --git a/src/views/device/BleDistance.tsx b/src/views/device/BleDistance.tsx new file mode 100644 index 0000000..608dfda --- /dev/null +++ b/src/views/device/BleDistance.tsx @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native'; +import { rpx } from '../../utils/rpx'; + +const BleDistance = () => { + const [isEnabled, setIsEnabled] = useState(false); // 添加状态控制按钮 + return ( + + + + 1.请走到空旷区 + 请在空旷区域进行标定，否则标定结果可能受环境（墙体、金属等）干扰影响 + 2.请减少周围的设备干扰 + 其他手机或设备的蓝牙信号及电磁可能会影响标定结果 + 3.请站在您期望的无感解锁位置 + 建议不要离车太远，否则可能导致您预期外的解锁 发生 + 4.点击标定按钮标 + 标定成功后车辆将基于当前位置设置无感解锁距离 + 提示 + 若您想要更改无感解锁距离，可以重新标定，受蓝牙信号强度波动影响，您的实际无感解锁位置可能与您的标定位置略有偏差 + + 开始标定 + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F3FCFF', + }, + scrollContent: { + alignItems: 'center', + paddingBottom: rpx(40), // 添加底部间距 + }, + btn: { + marginTop: rpx(50), + width: rpx(614), + height: rpx(92), + backgroundColor: '#4297F3', + borderRadius: rpx(16), + alignItems: 'center', + justifyContent: 'center', + }, + btnTxt: { + fontSize: rpx(40), + fontWeight: '500', + color: '#fff', + }, + icon: { + marginLeft: rpx(80), + marginTop: rpx(100), + width: rpx(540), + height: rpx(450), + }, + txt: { + width: rpx(608), + marginTop: rpx(20), + fontSize: rpx(28), + color: '#808080', + }, + tit: { + fontWeight: '500', + width: rpx(608), + marginTop: rpx(20), + fontSize: rpx(32), + color: '#3D3D3D', + }, +}); + +export default BleDistance; \ No newline at end of file diff --git a/src/views/device/DeviceShare.tsx b/src/views/device/DeviceShare.tsx new file mode 100644 index 0000000..db12ece --- /dev/null +++ b/src/views/device/DeviceShare.tsx @@ -0,0 +1,154 @@ +import React from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; +import { rpx } from '../../utils/rpx'; +import { useNavigation } from '@react-navigation/native'; +const DeviceShare = () => { + const navigation = useNavigation(); + return ( + + + 共享钥匙（2/3） + 临时借用车辆，可以使用基础控车功能 + + + + + 张三 + 13860332568 + + 待领取 + + + 剩余有效期：23小时27分 + + + + { + navigation.navigate('AddShare' as never); + }}> + + + 添加成员 + + + + + + 查看已失效共享 + + + + + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F3FCFF', + alignItems: 'center', + }, + addBtnImg: { + width: rpx(32), + height: rpx(32), + }, + shareTip: { + flexDirection: 'row', + alignItems: 'center', + marginTop: rpx(44), + }, + shareBtnTxt: { + fontSize: rpx(32), + color: '#808080', + }, + addBtn: { + width: rpx(592), + height: rpx(108), + backgroundColor: '#ffffff', + borderRadius: rpx(16), + marginTop: rpx(30), + borderWidth: rpx(2), + borderColor: '#808080', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + addBtnTxt: { + marginLeft: rpx(12), + fontSize: rpx(36), + color: '#808080', + }, + cardBottom: { + flexDirection: 'row', + alignItems: 'center', + display: 'flex', + flexWrap: 'nowrap', + }, + lasttime: { + marginLeft: rpx(124), + fontSize: rpx(24), + color: '#4297F3', + }, + lasttimeImg: { + marginLeft: 'auto', + width: rpx(24), + height: rpx(24), + }, + cardTop: { + flexDirection: 'row', + alignItems: 'center', + display: 'flex', + flexWrap: 'nowrap', + }, + cardType: { + marginLeft: 'auto', + alignSelf: 'flex-start', + fontSize: rpx(32), + color: '#4297F3', + }, + cardTopTxt: { + marginLeft: rpx(28), + + }, + cardTopImg: { + width: rpx(96), + height: rpx(96), + borderRadius: rpx(48), + }, + cardTopName: { + + fontSize: rpx(44), + color: '#3D3D3D', + }, + cardTopPhone: { + fontSize: rpx(36), + color: '#808080', + }, + + shareBox: { + width: rpx(688), + borderRadius: rpx(30), + backgroundColor: '#fff', + padding: rpx(32), + }, + shareTitle: { + fontWeight: 'bold', + fontSize: rpx(44), + color: '#3D3D3D', + }, + shareTxt: { + marginTop: rpx(14), + fontWeight: '500', + fontSize: rpx(28), + color: '#999', + }, + card: { + width: rpx(592), + padding: rpx(32), + marginTop: rpx(32), + borderRadius: rpx(16), + borderWidth: rpx(2), + borderColor: '#808080 ', + + }, +}); +export default DeviceShare; diff --git a/src/views/device/UnlockSetting.tsx b/src/views/device/UnlockSetting.tsx new file mode 100644 index 0000000..73ff702 --- /dev/null +++ b/src/views/device/UnlockSetting.tsx @@ -0,0 +1,241 @@ +import React, { useState } from 'react'; +import { View, Text, TouchableOpacity, StyleSheet, Image, Switch } from 'react-native'; +import Slider from '@react-native-community/slider'; // 修改这里的导入 +import { rpx } from '../../utils/rpx'; +import { useNavigation } from '@react-navigation/native'; +const UnlockSetting = () => { + const navigation = useNavigation(); + const [isAutoOff, setIsAutoOff] = useState(true); + const [sliderValue, setSliderValue] = useState(1); // 1表示标准 + const [isCustomDistance, setIsCustomDistance] = useState(false); // 是否自定义距离 + + return ( + + + + + + + + 无感解锁 + + setIsAutoOff(!isAutoOff)} + value={isAutoOff} + trackColor={{ false: '#767577', true: '#4297F3' }} + thumbColor={'#fff'} + /> + + + 1.手机打开蓝牙并靠近车辆即可自动解锁，解锁时请尽 量减少手机与车辆之间的遮挡 + 2.若解锁遇到问题，建议您尝试重新连接蓝牙，或尝试 调节无感解锁的感应距离 + + + + + {isAutoOff && ( + + + + + + 解锁位置 + + + setIsCustomDistance(false)} + > + + + + 设备距离 + + + + + + + 近 + 标准 + 远 + + + + + setIsCustomDistance(true)} + > + + + + 自定义距离 + + {isCustomDistance && ( + navigation.navigate('BleDistance' as never)}> + 标定 + + )} + + + + + )} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + backgroundColor: '#F3FCFF', + }, + distanceBtn: { + marginLeft: 'auto', + marginRight: rpx(40), + width: rpx(154), + height: rpx(56), + backgroundColor: '#4297F3', + borderRadius: rpx(28), + alignItems: 'center', + justifyContent: 'center', + }, + distanceBtnTxt: { + fontWeight: '500', + fontSize: rpx(32), + color: '#fff', + }, + selectedOption: { + backgroundColor: '#F5F5F5', + borderRadius: rpx(30), + }, + selectedText: { + color: '#4297F3', + }, + selectedRadioButton: { + borderColor: '#4297F3', + }, + distanceOptions: { + flexDirection: 'row', + marginTop: rpx(20), + marginLeft: rpx(62), + }, + distanceOption: { + flexDirection: 'row', + alignItems: 'center', + marginRight: rpx(40), + }, + radioButton: { + width: rpx(40), + height: rpx(40), + borderRadius: rpx(20), + borderWidth: 2, + borderColor: '#CCCCCC', + alignItems: 'center', + justifyContent: 'center', + marginRight: rpx(10), + }, + radioInner: { + width: rpx(24), + height: rpx(24), + borderRadius: rpx(12), + backgroundColor: 'transparent', + }, + radioInnerSelected: { + backgroundColor: '#4297F3', + }, + distanceText: { + fontSize: rpx(28), + color: '#333', + }, + sliderContainer: { + marginTop: rpx(30), + marginLeft: rpx(62), + width: '85%', + }, + slider: { + width: '100%', + height: rpx(40), + }, + sliderLabels: { + flexDirection: 'row', + justifyContent: 'space-between', + marginTop: rpx(10), + }, + sliderLabel: { + fontSize: rpx(24), + color: '#999', + }, + img: { + width: rpx(688), + height: rpx(600), + }, + card: { + marginTop: rpx(20), + width: rpx(688), + backgroundColor: '#fff', + borderRadius: rpx(30), + padding: rpx(30), + paddingTop: rpx(0), + }, + icon_set: { + width: rpx(50), + height: rpx(50), + }, + cont_li: { + paddingTop: rpx(32), + paddingBottom: rpx(32), + borderBottomWidth: rpx(1), + borderBottomColor: '#EBEBEB', + }, + cont_li_right: { + marginLeft: 'auto', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + cont_li_content: { + flexDirection: 'column', + }, + cont_li_top: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: rpx(8), + }, + text_set: { + fontWeight: '500', + fontSize: rpx(36), + color: '#333', + marginLeft: rpx(10), + }, + rightTxt: { + fontWeight: '500', + fontSize: rpx(28), + color: '#4297F3', + marginRight: rpx(8), + }, + icon_right: { + width: rpx(32), + height: rpx(32), + }, + tipTxt: { + width: '85%', + marginLeft: rpx(62), + fontSize: rpx(28), + color: '#999', + marginTop: rpx(8), + }, +}); + +export default UnlockSetting; \ No newline at end of file diff --git a/src/views/device/deviceList.tsx b/src/views/device/deviceList.tsx index cc58302..55b26d4 100644 --- a/src/views/device/deviceList.tsx +++ b/src/views/device/deviceList.tsx @@ -16,7 +16,7 @@ export default function DeviceList() { const [selectedItem, setSelectedItem] = useState(null); const handlePress = () => { - navigation.navigate('BindIndex'); + navigation.navigate('BindIndex' as never); // console.log(navigation); }; diff --git a/src/views/device/deviceMap.tsx b/src/views/device/deviceMap.tsx index 75a2a59..7c140c7 100644 --- a/src/views/device/deviceMap.tsx +++ b/src/views/device/deviceMap.tsx @@ -1,64 +1,128 @@ -import React, { useEffect } from 'react'; -import { View, Text, StyleSheet, TouchableOpacity, Image, StatusBar, Linking, Platform } from 'react-native'; -import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d'; -import { init, Geolocation } from 'react-native-amap-geolocation'; +import React, { useEffect, useState } from 'react'; +import { View, Text, StyleSheet, TouchableOpacity, Image, StatusBar, Linking, Platform, PermissionsAndroid } from 'react-native'; +import { MapView, Marker, MapType } from 'react-native-amap3d'; +import Geolocation from '@react-native-community/geolocation'; import { rpx } from '../../utils/rpx'; import { useNavigation } from '@react-navigation/native'; +import { transformFromWGSToGCJ } from '../../utils/coordtransform'; const DeviceMap = () => { const navigation = useNavigation(); - const latitude = 26.95500669; - const longitude = 120.32736769; - const imageUrl = "https://lxnapi.ccttiot.com/bike/img/static/uRx1B8B8acbquF2TO7Ry"; - - const [userLocation, setUserLocation] = React.useState({ - latitude: 0, - longitude: 0, + const [location, setLocation] = useState({ + latitude: 26.95500669, + longitude: 120.32736769, }); + const [isLoading, setIsLoading] = useState(false); - useEffect(() => { - // 初始化定位 - async function initGeolocation() { - await init({ - ios: "812efd3a950ba3675f928630302c6463", - android: "812efd3a950ba3675f928630302c6463" - }); - - Geolocation.getCurrentPosition( - ({ coords }) => { - // console.log('定位错误:', coords); - setUserLocation({ - latitude: coords.latitude, - longitude: coords.longitude, - }); - }, - (error) => { - console.log('定位错误:', error); - }, - // { - // timeout: 15000, - // maximumAge: 10000, - // distanceFilter: 100, - // } + // 请求 Android 定位权限 + const requestAndroidPermission = async () => { + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, + { + title: "位置信息权限", + message: "需要获取您的位置信息", + buttonNeutral: "稍后询问", + buttonNegative: "取消", + buttonPositive: "确定" + } ); + return granted === PermissionsAndroid.RESULTS.GRANTED; + } catch (err) { + console.warn(err); + return false; } + }; - initGeolocation(); + const getCurrentLocation = async () => { + setIsLoading(true); + try { + // ... 权限检查和配置代码保持不变 + + // 同时发起高精度和低精度定位请求 + const highAccuracyPromise = new Promise((resolve, reject) => { + Geolocation.getCurrentPosition( + resolve, + reject, + { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 1000 + } + ); + }); + + const lowAccuracyPromise = new Promise((resolve, reject) => { + Geolocation.getCurrentPosition( + resolve, + reject, + { + enableHighAccuracy: false, + timeout: 10000, + maximumAge: 5000 + } + ); + }); + + Promise.race([highAccuracyPromise, lowAccuracyPromise]) + .then((position: any) => { + console.log('原始定位结果:', position); + // 转换坐标系 + const gcjLocation = transformFromWGSToGCJ( + position.coords.latitude, + position.coords.longitude + ); + console.log('转换后的坐标:', gcjLocation); + setLocation(gcjLocation); + setIsLoading(false); + }) + .catch((error) => { + console.error('定位失败:', error); + setIsLoading(false); + }); + + } catch (error) { + console.error('获取位置信息失败:', error); + setIsLoading(false); + } + }; + + // 位置监听也需要转换坐标系 + useEffect(() => { + getCurrentLocation(); + + const watchId = Geolocation.watchPosition( + (position) => { + const gcjLocation = transformFromWGSToGCJ( + position.coords.latitude, + position.coords.longitude + ); + setLocation(gcjLocation); + }, + (error) => { + console.error('位置监听错误:', error); + }, + { + enableHighAccuracy: true, + timeout: 5000, + maximumAge: 1000, + distanceFilter: 10 + } + ); - // 组件卸载时清理 return () => { - Geolocation.stop(); + Geolocation.clearWatch(watchId); }; }, []); - // 跳转到高德地图 + // 跳转到高德地图 const openAMap = async () => { const url = Platform.select({ - android: `androidamap://navi?sourceApplication=appname&lat=${latitude}&lon=${longitude}&dev=0&style=2`, - ios: `iosamap://navi?sourceApplication=appname&lat=${latitude}&lon=${longitude}&dev=0&style=2`, + android: `androidamap://navi?sourceApplication=appname&lat=${location.latitude}&lon=${location.longitude}&dev=0&style=2`, + ios: `iosamap://navi?sourceApplication=appname&lat=${location.latitude}&lon=${location.longitude}&dev=0&style=2`, }); - - const fallbackUrl = `https://uri.amap.com/navigation?to=${longitude},${latitude},目的地&mode=car&coordinate=gaode`; + const imageUrl = "https://lxnapi.ccttiot.com/bike/img/static/uRx1B8B8acbquF2TO7Ry"; + const fallbackUrl = `https://uri.amap.com/navigation?to=${location.longitude},${location.latitude},目的地&mode=car&coordinate=gaode`; try { // 检查是否安装了高德地图 @@ -79,11 +143,6 @@ const DeviceMap = () => { return ( - { zoomEnabled={true} initialCameraPosition={{ target: { - latitude, - longitude, + latitude: location.latitude, + longitude: location.longitude, }, zoom: 15, }} > - {/* 设备位置标记 */} + - - {/* 用户位置标记 */} - {userLocation.latitude !== 0 && ( - - )} + 福建省宁德市福鼎市海滨路200号靠近福鼎第四中学 + + + + 12:00 + + { }; const styles = StyleSheet.create({ + container: { flex: 1, backgroundColor: '#FFFFFF', }, + locationIcon: { + position: 'absolute', + right: rpx(32), + bottom: rpx(400), + width: rpx(90), + height: rpx(90), + }, map: { flex: 1, width: '100%', }, + timeBlock: { + display: 'flex', + flexDirection: 'row', // 确保内容水平排列 + alignSelf: 'flex-start', + justifyContent:'center', + alignItems:'center', + padding: rpx(8) , + paddingHorizontal:rpx(18), + backgroundColor: '#EFEFEF', + borderRadius: rpx(29), + flexWrap: 'nowrap', // 防止换行 + marginBottom:rpx(40), + }, + + timeClock:{ + marginRight:rpx(14), + width:rpx(26), + height:rpx(26), + }, + timeText1:{ + fontSize:rpx(24), + color:'#808080', + + }, header: { position: 'absolute', top: 0, @@ -196,7 +283,7 @@ const styles = StyleSheet.create({ backgroundColor: '#FFFFFF', borderTopLeftRadius: rpx(24), borderTopRightRadius: rpx(24), - padding: rpx(32), + padding: rpx(36), }, addressInfo: { flexDirection: 'row', @@ -205,18 +292,18 @@ const styles = StyleSheet.create({ }, addressText: { flex: 1, - fontSize: rpx(28), + fontSize: rpx(36), color: '#333333', marginRight: rpx(16), }, voiceIcon: { - width: rpx(44), - height: rpx(44), + width: rpx(90), + height: rpx(90), }, navigationButton: { height: rpx(96), backgroundColor: '#2089FF', - borderRadius: rpx(48), + borderRadius: rpx(20), justifyContent: 'center', alignItems: 'center', }, diff --git a/src/views/device/deviceSet.tsx b/src/views/device/deviceSet.tsx new file mode 100644 index 0000000..d9efd0b --- /dev/null +++ b/src/views/device/deviceSet.tsx @@ -0,0 +1,364 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity, Modal } from 'react-native'; +import { rpx } from '../../utils/rpx'; +import { useNavigation } from '@react-navigation/native'; + +const DeviceSet = () => { + const navigation = useNavigation(); + const [showAutoOffModal, setShowAutoOffModal] = useState(false); + const [showAutoLockModal, setShowAutoLockModal] = useState(false); + const [selectedTime, setSelectedTime] = useState('3分钟'); + const [selectedLockTime, setSelectedLockTime] = useState('15秒'); + const [showSensitivityModal, setShowSensitivityModal] = useState(false); + const [selectedSensitivity, setSelectedSensitivity] = useState('3级'); + + // 自动关机选项 + const autoOffOptions = ['1分钟', '3分钟', '5分钟', '10分钟']; + // 自动锁车选项 + const autoLockOptions = ['15秒', '30秒', '1分钟', '3分钟']; + // 震动灵敏度选项 + const sensitivityOptions = ['1级', '2级', '3级', '4级', '5级']; + // 处理无感解锁点击 + const handleUnlockPress = () => { + navigation.navigate('UnlockSetting' as never); // 替换成实际的路由名 + }; + + return ( + + + + + + + 无感解锁 + + + + + + + + setShowAutoOffModal(true)}> + + + + 自动关机 + + {selectedTime} + + + + 车辆停稳并在等待时间内未行驶则自动关机 + + + + setShowAutoLockModal(true)}> + + + + 自动锁车 + + {selectedLockTime} + + + + 车辆停稳并在等待时间内未行驶则自动锁车 + + + + setShowSensitivityModal(true)}> + + + + 震动报警灵敏度 + + + + + + + + + + + + + + setShowAutoOffModal(false)} + > + 取消 + + 自动关机 + setShowAutoOffModal(false)} + > + 确定 + + + + {autoOffOptions.map((time, index) => ( + { + setSelectedTime(time); + setShowAutoOffModal(false); + }} + > + + {time} + + + ))} + + + + + +{/* 修改自动锁车弹窗 */} + + + + + setShowAutoLockModal(false)} + > + 取消 + + 自动锁车 + setShowAutoLockModal(false)} + > + 确定 + + + + {autoLockOptions.map((time, index) => ( + { + setSelectedLockTime(time); + setShowAutoLockModal(false); + }} + > + + {time} + + + ))} + + + + + {/* 在最后添加震动报警灵敏度选择弹窗 */} + + + + + setShowSensitivityModal(false)} + > + 取消 + + 报警灵敏度 + setShowSensitivityModal(false)} + > + 确定 + + + + {sensitivityOptions.map((level, index) => ( + { + setSelectedSensitivity(level); + setShowSensitivityModal(false); + }} + > + + {level} + + + ))} + + + + + + ); +}; + +const styles = StyleSheet.create({ + headerButton: { + padding: rpx(8), + minWidth: rpx(80), + alignItems: 'center', + }, + confirmText: { + fontSize: rpx(28), + color: '#4297F3', + fontWeight: '500', + }, + optionsContainer: { + paddingVertical: rpx(20), + }, + optionItem: { + padding: rpx(30), + alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#EBEBEB', + }, + selectedItemBg: { + backgroundColor: '#F5F5F5', + }, + optionText: { + fontSize: rpx(30), + color: '#333', + }, + selectedOption: { + color: '#4297F3', + fontWeight: '500', + }, + modalHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: rpx(16), + borderBottomWidth: 1, + borderBottomColor: '#EBEBEB', + }, + container: { + flex: 1, + alignItems: 'center', + backgroundColor: '#F3FCFF', + }, + card: { + marginTop: rpx(20), + width: rpx(688), + backgroundColor: '#fff', + borderRadius: rpx(30), + padding: rpx(30), + paddingTop: rpx(0), + }, + icon_set: { + width: rpx(50), + height: rpx(50), + }, + cont_li_right: { + marginLeft: 'auto', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + rightTxt: { + fontWeight: '500', + fontSize: rpx(28), + color: '#4297F3', + marginRight: rpx(8), + }, + noBotLine: { + borderBottomWidth: 0, + borderBottomColor: 'transparent', + }, + tipTxt: { + width: '85%', + marginLeft: rpx(62), + fontSize: rpx(28), + color: '#999', + marginTop: rpx(8), + }, + icon_right: { + width: rpx(32), + height: rpx(32), + }, + cont_li_content: { + flexDirection: 'column', + }, + cont_li: { + paddingTop: rpx(32), + paddingBottom: rpx(32), + borderBottomWidth: rpx(1), + borderBottomColor: '#EBEBEB', + }, + text_set: { + fontWeight: '500', + fontSize: rpx(36), + color: '#333', + marginLeft: rpx(10), + }, + cont_li_top: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: rpx(8), + }, + modalContainer: { + flex: 1, + backgroundColor: 'rgba(0,0,0,0.5)', + justifyContent: 'flex-end', + }, + modalContent: { + backgroundColor: '#fff', + borderTopLeftRadius: rpx(20), + borderTopRightRadius: rpx(20), + paddingBottom: rpx(34), + }, + + modalTitle: { + fontSize: rpx(32), + fontWeight: '500', + color: '#333', + }, + + cancelButton: { + marginTop: rpx(16), + padding: rpx(30), + alignItems: 'center', + }, + cancelText: { + fontSize: rpx(30), + color: '#666', + }, +}); + +export default DeviceSet; \ No newline at end of file