From 63226e5dfec8aa015ace0041d22dcc1b6d602c8d Mon Sep 17 00:00:00 2001 From: tx <2622874537@qq.com> Date: Tue, 12 Nov 2024 14:32:14 +0800 Subject: [PATCH] 111 --- android/gradle.properties | 2 +- android/settings.gradle | 2 + src/components/BindNavBar.tsx | 72 +++++++++++++++ src/views/HomeStackNavigator.tsx | 85 +++++++++++++++++ src/views/bind/ConfirmBind.tsx | 101 ++++++++++++++++++++ src/views/bind/bind_index.tsx | 152 +++++++++++++++++++++++++++++++ src/views/bind/sn_bind.tsx | 126 +++++++++++++++++++++++++ 7 files changed, 539 insertions(+), 1 deletion(-) create mode 100644 src/components/BindNavBar.tsx create mode 100644 src/views/HomeStackNavigator.tsx create mode 100644 src/views/bind/ConfirmBind.tsx create mode 100644 src/views/bind/bind_index.tsx create mode 100644 src/views/bind/sn_bind.tsx diff --git a/android/gradle.properties b/android/gradle.properties index a46a5b9..9ff7b56 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -23,7 +23,7 @@ org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m android.useAndroidX=true # Automatically convert third-party libraries to use AndroidX android.enableJetifier=true - +android.enableDependencySubstitution=false # Use this property to specify which architecture you want to build. # You can also override it from the CLI using # ./gradlew -PreactNativeArchitectures=x86_64 diff --git a/android/settings.gradle b/android/settings.gradle index b4f32f2..007cf2d 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -2,3 +2,5 @@ rootProject.name = 'BikeApp_demo' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') +include ':react-native-camera' +project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android') \ No newline at end of file diff --git a/src/components/BindNavBar.tsx b/src/components/BindNavBar.tsx new file mode 100644 index 0000000..2c6de92 --- /dev/null +++ b/src/components/BindNavBar.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; +import { useNavigation, useRoute } from '@react-navigation/native'; +import { rpx } from '../utils/rpx'; + +const NAV_ICONS = { + scan: { + active: 'https://lxnapi.ccttiot.com/bike/img/static/uDcctJhzNTfO2M1n0qvk', + inactive: 'https://lxnapi.ccttiot.com/bike/img/static/uFWJ21bma6h1G4Mj9gSk' + }, + manual: { + active: 'https://lxnapi.ccttiot.com/bike/img/static/uGWnLtXhYlau5YwbYi24', + inactive: 'https://lxnapi.ccttiot.com/bike/img/static/uwg3CRXfuLLYpDhKZpay' + }, + +}; + +const BindNavBar = () => { + const navigation = useNavigation(); + const route = useRoute(); + + const currentRoute = route.name; + + return ( + + navigation.navigate('BindIndex' as never)} + > + + + + navigation.navigate('SnBind' as never)} + > + + + + + + ); +}; + +const styles = StyleSheet.create({ + bottomNav: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + height: rpx(180), + backgroundColor: '#fff', + borderTopLeftRadius: rpx(20), + borderTopRightRadius: rpx(20), + paddingBottom: rpx(20), + }, + navItem: { + alignItems: 'center', + paddingHorizontal: rpx(20), + }, + navIcon: { + width: rpx(126), + height: rpx(94), + }, +}); + +export default BindNavBar; \ No newline at end of file diff --git a/src/views/HomeStackNavigator.tsx b/src/views/HomeStackNavigator.tsx new file mode 100644 index 0000000..c10d0c0 --- /dev/null +++ b/src/views/HomeStackNavigator.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/native'; +import HomeScreen from './Home/HomeScreen'; +import DeviceList from './device/deviceList'; +import BindIndex from './bind/bind_index'; +import SnBind from './bind/sn_bind'; +import ConfirmBind from './bind/ConfirmBind'; +// import BleBind from './bind/ble_bind'; +import { getFocusedRouteNameFromRoute } from '@react-navigation/native'; + +type RootStackParamList = { + Home: undefined; + DeviceList: undefined; + BindIndex: undefined; + SnBind: undefined; + ConfirmBind: undefined; +}; + +const Stack = createStackNavigator(); + +// 修改类型定义 +const createScreenOptions = (title: string): StackNavigationOptions => { + return { + title, + headerTitleAlign: 'center', + headerStyle: { + backgroundColor: '#F3FCFF', + }, + headerTitleStyle: { + fontSize: 18, + fontWeight: '500', + }, + }; +}; + +type Props = { + navigation: any; + route: any; +}; + +export default function HomeStackNavigator({ navigation, route }: Props) { + React.useEffect(() => { + const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home'; + const hideTabBarRoutes = ['DeviceList', 'BindIndex', 'SnBind', 'BleBind', 'ConfirmBind']; // 添加新的路由名 + const shouldHideTabBar = hideTabBarRoutes.includes(routeName); + + navigation.getParent()?.setOptions({ + tabBarStyle: shouldHideTabBar ? { display: 'none' } : undefined + }); + }, [navigation, route]); + + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/views/bind/ConfirmBind.tsx b/src/views/bind/ConfirmBind.tsx new file mode 100644 index 0000000..245dc8b --- /dev/null +++ b/src/views/bind/ConfirmBind.tsx @@ -0,0 +1,101 @@ +// src/views/ProfileScreen.tsx +import React from 'react'; +import { View, Text, StyleSheet,Image,Button } from 'react-native'; +import { RouteProp, useRoute } from '@react-navigation/native'; +import { rpx } from '../../utils/rpx'; +// 添加类型定义 +type RootStackParamList = { + ConfirmBind: { + sn: string; + }; +}; + +type ConfirmBindRouteProp = RouteProp; + +const ConfirmBind = () => { + const route = useRoute(); + const { sn } = route.params; + + console.log('接收到的SN参数:', sn); + + return ( + + + + + 车型 + 这才是ZVFUJNv吃哪家快递给 + + + 车辆编号 + 23865221368 + + + 固件信息 + 20.0.6 BCM + + + + + 确定 + + + ); +}; + +const styles = StyleSheet.create({ + + container: { + position: 'relative', + display: 'flex', + alignItems: 'center', + flex: 1, + backgroundColor: '#F3FCFF', + }, + buttons:{ + marginTop: rpx(400), + width: rpx(614), + height: rpx(92), + backgroundColor: '#4297F3', + borderRadius: rpx(20), + justifyContent: 'center', + alignItems: 'center', + }, + buttonText:{ + color: '#FFFFFF', + fontSize: rpx(40), + fontWeight: 'bold', + }, + carInfoItem:{ + marginTop: rpx(28), + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + }, + carInfo: { + padding: rpx(16), + paddingLeft: rpx(42), + paddingRight: rpx(42), + width: rpx(688), + height: rpx(256), + backgroundColor: '#FFFFFF', + borderRadius: rpx(30), + // iOS 阴影 + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowOffset: { + width: 0, + height: rpx(2), + }, + shadowOpacity: 1, + shadowRadius: rpx(18), + // Android 阴影 + elevation: 4, +}, + Image: { + marginTop: rpx(178), + width: rpx(440), + height: rpx(340) + }, +}); + +export default ConfirmBind; \ No newline at end of file diff --git a/src/views/bind/bind_index.tsx b/src/views/bind/bind_index.tsx new file mode 100644 index 0000000..250ec9d --- /dev/null +++ b/src/views/bind/bind_index.tsx @@ -0,0 +1,152 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet, Image, TouchableOpacity, Modal } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { rpx } from '../../utils/rpx'; +import BindNavBar from '../../components/BindNavBar'; +import QRCodeScanner from 'react-native-qrcode-scanner'; +import { RNCamera } from 'react-native-camera'; + +const BindIndex = () => { + const [isScanning, setIsScanning] = useState(false); + const navigation = useNavigation(); + + const handlePress = () => { + setIsScanning(true); + }; + + const onSuccess = (e) => { + console.log('扫描结果:', e.data); + setIsScanning(false); + // 这里处理扫描到的数据 + }; + + return ( + + + + + + 扫描激活码即可 + + + + + 扫码绑车 + + + + + + setIsScanning(false)} + animationType="slide" + > + + 将二维码放入框内扫描 + + } + bottomContent={ + setIsScanning(false)} + > + 取消扫描 + + } + containerStyle={styles.scannerContainer} + cameraStyle={styles.cameraContainer} + /> + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F3FCFF', + }, + addTxt: { + marginLeft: rpx(20), + fontWeight: '500', + color: '#ffffff', + fontSize: rpx(40), + marginRight: rpx(10), + }, + addcar: { + marginTop: rpx(122), + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: rpx(641), + height: rpx(92), + backgroundColor: '#4297F3', + borderRadius: rpx(20), + }, + add: { + width: rpx(34), + height: rpx(34), + }, + contentArea: { + flex: 1, + alignItems: 'center', + }, + txtbox: { + width: rpx(440), + justifyContent: 'center', + flexDirection: 'row', + alignItems: 'center', + }, + txt: { + marginLeft: rpx(14), + fontSize: rpx(28), + fontWeight: '400', + color: '#3D3D3D', + }, + yuan: { + width: rpx(22), + height: rpx(22), + borderRadius: rpx(11), + backgroundColor: 'rgba(255, 130, 130, 1)', + }, + Image: { + marginTop: rpx(178), + width: rpx(440), + height: rpx(340) + }, + scannerContainer: { + flex: 1, + backgroundColor: '#000', + }, + centerText: { + fontSize: rpx(28), + color: '#ffffff', + marginBottom: rpx(20), + }, + buttonText: { + fontSize: rpx(28), + color: '#ffffff', + }, + buttonTouchable: { + padding: rpx(32), + backgroundColor: '#4297F3', + borderRadius: rpx(10), + marginTop: rpx(32), + }, + cameraContainer: { + height: rpx(800), + }, +}); + +export default BindIndex; \ No newline at end of file diff --git a/src/views/bind/sn_bind.tsx b/src/views/bind/sn_bind.tsx new file mode 100644 index 0000000..f6b7334 --- /dev/null +++ b/src/views/bind/sn_bind.tsx @@ -0,0 +1,126 @@ +import React, { useState } from 'react'; +import { + View, + StyleSheet, + TextInput, + TouchableWithoutFeedback, + Keyboard, + Text, + TouchableOpacity, + Alert +} from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { StackNavigationProp } from '@react-navigation/stack'; +import BindNavBar from '../../components/BindNavBar'; +import { rpx } from '../../utils/rpx'; + +// 添加类型定义 +type RootStackParamList = { + Home: undefined; + DeviceList: undefined; + BindIndex: undefined; + SnBind: undefined; + ConfirmBind: { + sn: string; + }; +}; + +type NavigationProp = StackNavigationProp; + +const SnBind = () => { + const navigation = useNavigation(); + const [sn, setSn] = useState(''); + + const handlePress = () => { + if (!sn.trim()) { + Alert.alert( + '提示', + '请输入SN码', + [{ text: '确定' }] + ); + return; + } + navigation.navigate('ConfirmBind', { sn: sn.trim() }); + }; + + return ( + + + + + + + + 输入对应二维码下方的激活码 + + + + 确认绑定 + + + + + + + ); +}; + +const styles = StyleSheet.create({ + addTxt: { + marginLeft: rpx(20), + fontWeight: '500', + color: '#ffffff', + fontSize: rpx(40), + marginRight: rpx(10), + }, + addcar: { + width: rpx(641), + height: rpx(92), + marginTop: rpx(122), + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#4297F3', + borderRadius: rpx(20), + }, + add: { + width: rpx(34), + height: rpx(34), + }, + txt: { + fontWeight: '400', + color: '#3D3D3D', + fontSize: rpx(32) + }, + tip: { + marginTop: rpx(40), + paddingLeft: rpx(32), + width: rpx(750) + }, + input: { + flex: 1, + paddingHorizontal: rpx(30), + fontSize: rpx(28), + }, + IptBox: { + width: rpx(688), + height: rpx(128), + borderRadius: rpx(30), + backgroundColor: '#ffffff' + }, + container: { + flex: 1, + backgroundColor: '#F3FCFF', + }, + contentArea: { + flex: 1, + alignItems: 'center' + }, +}); + +export default SnBind; \ No newline at end of file