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

111

Browse Source
This commit is contained in:
tx 2024-11-12 14:32:14 +08:00
parent 41c2159c23
commit 63226e5dfe
7 changed files with 539 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
android/gradle.properties
View File

@ -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 <task> -PreactNativeArchitectures=x86_64

2
android/settings.gradle
View File

@ -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')

72
src/components/BindNavBar.tsx Normal file
View File

@ -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 (
<View style={styles.bottomNav}>
<TouchableOpacity
style={styles.navItem}
onPress={() => navigation.navigate('BindIndex' as never)}
>
<Image
source={{ uri: currentRoute === 'BindIndex' ? NAV_ICONS.scan.active : NAV_ICONS.scan.inactive }}
style={styles.navIcon}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.navItem}
onPress={() => navigation.navigate('SnBind' as never)}
>
<Image
source={{ uri: currentRoute === 'SnBind' ? NAV_ICONS.manual.active : NAV_ICONS.manual.inactive }}
style={styles.navIcon}
/>
</TouchableOpacity>
</View>
);
};
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;

85
src/views/HomeStackNavigator.tsx Normal file
View File

@ -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<RootStackParamList>();
// 修改类型定义
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 (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="DeviceList"
component={DeviceList}
options={createScreenOptions('设备列表')}
/>
<Stack.Screen
name="BindIndex"
component={BindIndex}
options={createScreenOptions('扫码绑定')}
/>
<Stack.Screen
name="SnBind"
component={SnBind}
options={createScreenOptions('手动绑车')}
/>
<Stack.Screen
name="ConfirmBind"
component={ConfirmBind}
options={createScreenOptions('确认绑定')}
/>
</Stack.Navigator>
);
}

101
src/views/bind/ConfirmBind.tsx Normal file
View File

@ -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<RootStackParamList, 'ConfirmBind'>;
const ConfirmBind = () => {
const route = useRoute<ConfirmBindRouteProp>();
const { sn } = route.params;
console.log('接收到的SN参数:', sn);
return (
<View style={styles.container}>
<Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.Image} />
<View style={styles.carInfo}>
<View style={styles.carInfoItem}>
<Text>车型</Text>
<Text>这才是ZVFUJNv吃哪家快递给</Text>
</View>
<View style={styles.carInfoItem}>
<Text>车辆编号</Text>
<Text>23865221368</Text>
</View>
<View style={styles.carInfoItem}>
<Text>固件信息</Text>
<Text>20.0.6 BCM</Text>
</View>
</View>
<View style={styles.buttons}>
<Text style={styles.buttonText}>确定</Text>
</View>
</View>
);
};
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;

152
src/views/bind/bind_index.tsx Normal file
View File

@ -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 (
<View style={styles.container}>
<View style={styles.contentArea}>
<Image
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }}
style={styles.Image}
/>
<View style={styles.txtbox}>
<View style={styles.yuan}></View>
<Text style={styles.txt}>扫描激活码即可</Text>
</View>
<TouchableOpacity onPress={handlePress}>
<View style={styles.addcar}>
<Image
style={styles.add}
source={{uri:'https://lxnapi.ccttiot.com/bike/img/static/uvjU3Adq64wqc1TlXjwq'}}
/>
<Text style={styles.addTxt}>扫码绑车</Text>
</View>
</TouchableOpacity>
</View>
<BindNavBar />
<Modal
visible={isScanning}
onRequestClose={() => setIsScanning(false)}
animationType="slide"
>
<QRCodeScanner
onRead={onSuccess}
flashMode={RNCamera.Constants.FlashMode.auto}
topContent={
<Text style={styles.centerText}>
将二维码放入框内扫描
</Text>
}
bottomContent={
<TouchableOpacity
style={styles.buttonTouchable}
onPress={() => setIsScanning(false)}
>
<Text style={styles.buttonText}>取消扫描</Text>
</TouchableOpacity>
}
containerStyle={styles.scannerContainer}
cameraStyle={styles.cameraContainer}
/>
</Modal>
</View>
);
};
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;

126
src/views/bind/sn_bind.tsx Normal file
View File

@ -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<RootStackParamList>;
const SnBind = () => {
const navigation = useNavigation<NavigationProp>();
const [sn, setSn] = useState('');
const handlePress = () => {
if (!sn.trim()) {
Alert.alert(
'提示',
'请输入SN码',
[{ text: '确定' }]
);
return;
}
navigation.navigate('ConfirmBind', { sn: sn.trim() });
};
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<View style={styles.contentArea}>
<View style={styles.IptBox}>
<TextInput
style={styles.input}
placeholder="请输入SN"
value={sn}
onChangeText={setSn}
/>
</View>
<View style={styles.tip}>
<Text style={styles.txt}>输入对应二维码下方的激活码</Text>
</View>
<TouchableOpacity onPress={handlePress}>
<View style={styles.addcar}>
<Text style={styles.addTxt}>确认绑定</Text>
</View>
</TouchableOpacity>
</View>
<BindNavBar />
</View>
</TouchableWithoutFeedback>
);
};
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;