相册识别二维码功能

android/app/build.gradle

@@ -79,7 +79,7 @@ android {
         all*.exclude group: 'com.amap.api', module: 'location'
     }
     defaultConfig {
-        missingDimensionStrategy 'react-native-camera', 'general'
+         missingDimensionStrategy 'react-native-camera', 'general'
         applicationId "com.bikeapp_demo"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
@@ -87,12 +87,6 @@ android {
         versionName "1.0"
     }
     signingConfigs {
-        release {
-            storeFile file('my-release-key.jks')
-            storePassword 'jq888786' // 替换为你的密钥库密码
-            keyAlias 'my-key-alias' // 替换为你的密钥别名
-            keyPassword 'jq888786' // 替换为你的密钥密码
-        }
         debug {
             storeFile file('debug.keystore')
             storePassword 'android'
@@ -107,7 +101,7 @@ android {
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.release
+            signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
@@ -118,10 +112,10 @@ dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     
     implementation("com.facebook.react:react-android")
-    implementation "com.google.android.gms:play-services-vision:20.1.3"
+      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:3dmap:latest.integration'
     implementation 'com.amap.api:location:latest.integration'
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
@@ -130,4 +124,4 @@ dependencies {
     }
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package.json

@@ -47,6 +47,7 @@
     "react-native-view-shot": "^4.0.0",
     "react-native-wheel-picker-android": "^2.0.6",
     "rn-fetch-blob": "^0.12.0",
+    "rn-qr-generator": "^1.4.3",
     "utf8": "^3.0.0"
   },
   "devDependencies": {

src/views/bind/bind_index.tsx

@@ -18,17 +18,8 @@ import { RNCamera } from 'react-native-camera';
 import { TopNavigation, TopNavigationAction, Icon, Popover, Button } from '@ui-kitten/components';
 import Toast from 'react-native-toast-message';
 import { launchImageLibrary } from 'react-native-image-picker';
-
+import QRReader from 'rn-qr-generator';
-// 假设你有一个函数 checkIfImageContainsQRCode 和 decodeQRCodeFromImage
+import { apiService } from '../../utils/api';
-const checkIfImageContainsQRCode = async (imageUri: string): Promise<boolean> => {
-    // 实现判断图片是否包含二维码的逻辑
-    return true; // 示例返回值
-};
-
-const decodeQRCodeFromImage = async (imageUri: string): Promise<string> => {
-    // 实现二维码解析的逻辑
-    return 'example_sn=123456'; // 示例返回值
-};
 
 type RootStackParamList = {
     Home: undefined;
@@ -46,10 +37,6 @@ const BackIcon = (props: any) => (
     <Icon {...props} name='arrow-back-outline'/>
 );
 
-const MoreIcon = (props: any) => (
-    <Icon {...props} name='more-vertical'/>
-);
-
 const SnBind = () => {
     const navigation = useNavigation<NavigationProp>();
     const [sn, setSn] = useState('');
@@ -68,6 +55,52 @@ const SnBind = () => {
         setPopoverVisible(!popoverVisible);
     };
 
+    // 处理 keyId 的方法
+    const handleKeyId = async (keyId: string) => {
+        const res = await apiService.getUserInfo();
+        
+        console.log('处理 keyId:', keyId);
+        // TODO: 在这里添加处理 keyId 的逻辑
+    };
+
+    // 处理扫描结果的方法
+    const handleScanResult = (data: string) => {
+        console.log('扫描结果:', data);
+        try {
+            // 检查是否包含 sn
+            const snMatch = data.match(/[?&]sn=([^&]+)/);
+            if (snMatch && snMatch[1]) {
+                setSn(snMatch[1]);
+                setIsScanning(false);
+                Toast.show({
+                    type: 'success',
+                    text1: '扫描成功',
+                });
+                // 自动触发确认绑定
+                navigation.navigate('ConfirmBind', { sn: snMatch[1].trim() });
+                return;
+            }
+
+            // 检查是否包含 keyId
+            const keyIdMatch = data.match(/[?&]keyId=([^&]+)/);
+            if (keyIdMatch && keyIdMatch[1]) {
+                setIsScanning(false);
+                handleKeyId(keyIdMatch[1]);
+                return;
+            }
+
+            Toast.show({
+                type: 'error',
+                text1: '未找到有效的识别码',
+            });
+        } catch (error) {
+            Toast.show({
+                type: 'error',
+                text1: '二维码解析失败',
+            });
+        }
+    };
+
     const handlePress = () => {
         if (!sn.trim()) {
             Toast.show({
@@ -81,83 +114,45 @@ const SnBind = () => {
 
     const handleImagePicker = () => {
         setPopoverVisible(false);
-        launchImageLibrary({ mediaType: 'photo' }, (response) => {
+        launchImageLibrary({ 
+            mediaType: 'photo',
+            quality: 1,
+        }, async (response) => {
             if (response.didCancel) {
                 console.log('User cancelled image picker');
             } else if (response.errorCode) {
                 console.log('ImagePicker Error: ', response.errorMessage);
             } else if (response.assets && response.assets.length > 0) {
-                const imageUri = response.assets[0].uri;
+                try {
-                // 判断图片是否包含二维码
+                    const { uri } = response.assets[0];
-                checkIfImageContainsQRCode(imageUri)
+                    
-                    .then((containsQRCode) => {
+                    // 使用 QRReader 识别图片中的二维码
-                        if (!containsQRCode) {
+                    const result = await QRReader.detect({
-                            Toast.show({
+                        uri: uri
-                                type: 'error',
+                    });
-                                text1: '图片不包含二维码',
+
-                            });
+                    if (result.values && result.values.length > 0) {
-                            return;
+                        const qrData = result.values[0];
-                        }
+                        handleScanResult(qrData);
-                        // 使用二维码解析库解析图片
+                    } else {
-                        decodeQRCodeFromImage(imageUri)
-                            .then((data) => {
-                                console.log('二维码内容:', data);
-                                // 处理解析结果
-                                const snMatch = data.match(/[?&]sn=([^&]+)/);
-                                if (snMatch && snMatch[1]) {
-                                    setSn(snMatch[1]);
-                                    Toast.show({
-                                        type: 'success',
-                                        text1: '图片解析成功',
-                                    });
-                                } else {
-                                    Toast.show({
-                                        type: 'error',
-                                        text1: '未找到有效的SN码',
-                                    });
-                                }
-                            })
-                            .catch((error) => {
-                                Toast.show({
-                                    type: 'error',
-                                    text1: '图片解析失败或不包含二维码',
-                                });
-                            });
-                    })
-                    .catch((error) => {
                         Toast.show({
                             type: 'error',
-                            text1: '无法判断图片内容',
+                            text1: '图片中未检测到二维码',
                         });
+                    }
+                } catch (error) {
+                    console.error('扫描错误:', error);
+                    Toast.show({
+                        type: 'error',
+                        text1: '图片解析失败',
                     });
+                }
             }
         });
     };
 
     const onSuccess = (e: { data: string }) => {
-        console.log('扫描结果:', e.data);
+        handleScanResult(e.data);
-        // 提取sn参数值
-        try {
-            const snMatch = e.data.match(/[?&]sn=([^&]+)/);
-            if (snMatch && snMatch[1]) {
-                setSn(snMatch[1]);
-                setIsScanning(false);
-                Toast.show({
-                    type: 'success',
-                    text1: '扫描成功',
-                });
-            } else {
-                Toast.show({
-                    type: 'error',
-                    text1: '未找到有效的SN码',
-                });
-            }
-        } catch (error) {
-            Toast.show({
-                type: 'error',
-                text1: '二维码解析失败',
-            });
-        }
     };
 
     return (
@@ -385,7 +380,6 @@ const styles = StyleSheet.create({
         color: '#ffffff',
         fontSize: rpx(36),
     },
-    // 扫码相关样式
     modalContainer: {
         flex: 1,
         backgroundColor: '#000',