扫描二维码

采用：VisionCamera Documentation | VisionCamera (react-native-vision-camera.com) (opens new window)

# 安卓环境

安装
```
yarn add react-native-vision-camera
```
1

更新清单

在AndroidManifest.xml文件中添加

<uses-permission android:name="android.permission.CAMERA" />

使用MLKit Vision QRCODE扫描读取条形码的插件

rodgomesc/vision-camera-code-scanner: VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision QrCode Scanning (github.com) (opens new window)
1. 安装
```
yarn add vision-camera-code-scanner
```
  1
2. 安装
```
yarn add react-native-reanimated
```
  1
3. 将插件添加到 react-native-reanimated/plugin 您的 babel.config.js
```
  module.exports = {
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };
```
  1
  2
  3
  4
  5
  6
  注意
  
  react-native-reanimated/plugin 必须列在最后
4. 插入作为您的 index.tsx 第一行
```
import 'react-native-reanimated'
```
  1

使用视图

import { PERMISSIONS, request, RESULTS } from "react-native-permissions";
import { Camera, useCameraDevices, useCameraPermission, useCodeScanner } from "react-native-vision-camera";

const CameraScreen = ({ navigation }: any) => {

    const devices = useCameraDevices();
    const device = devices.find((d) => d.position === "back");
    const { hasPermission } = useCameraPermission()

    const codeScanner = useCodeScanner({
        codeTypes: ['qr', 'ean-13'],
        onCodeScanned: (codes) => {
            // 扫描后的内容后续操作
        }
    })

    const requestCameraPermission = async () => {
        if (Platform.OS === 'ios') {
            request(PERMISSIONS.IOS.CAMERA)
                .then((result: any) => {
                    switch (result) {
                        case RESULTS.UNAVAILABLE:
                            console.log('此功能不可用（在此设备/上下文中）',);
                            break;
                        case RESULTS.DENIED:
                            console.log('权限尚未请求/已被拒绝但可请求',);
                            break;
                        case RESULTS.GRANTED:
                            console.log('权限已授予');
                            break;
                        case RESULTS.BLOCKED:
                            console.log('权限已被拒绝且不可再请求');
                            break;
                    }
                })
        } else {
            request(PERMISSIONS.ANDROID.CAMERA)
                .then((result: any) => {
                    switch (result) {
                        case RESULTS.UNAVAILABLE:
                            console.log('此功能不可用（在此设备/上下文中）',);
                            break;
                        case RESULTS.DENIED:
                            console.log('权限尚未请求/已被拒绝但可请求',);
                            break;
                        case RESULTS.GRANTED:
                            console.log('权限已授予');
                            break;
                        case RESULTS.BLOCKED:
                            console.log('权限已被拒绝且不可再请求');
                            break;
                    }
                })
        }
    };

    useEffect(() => {
        requestCameraPermission()
    }, []);

    if (!hasPermission) {
        return <Text style={{ color: colors.whiteTextColor }}>Camera permission is not granted.</Text>;
    }
    if (device == null) return <Text>null</Text>


    return (
        <View style={styles.container}>
            {
                hasPermission && (<>
                    <View style={{ gap: 10 }}>
                        <CustomText numberOfLines={3} 
                            		textStyle={{ color: "white", fontWeight: "bold" }}
                                    content={i18n.t("instructionsForUse")}/>
                    </View>
                    <Camera
                        device={device}
                        isActive={true}
                        codeScanner={codeScanner}
                        onError={(error) => console.error("Camera error:", error)}
                    />
                </>)
            }
        </View>
    );
};

export default CameraScreen;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

# 报错解决方案

# 问题

在构建的时候报该错，Execution failed for task ':react-native-vision-camera:buildCMakeDebug[arm64-v8a]'.

# 解决方案

Execution failed for task ':react-native-vision-camera:generateJsonModelDebug'. > java.lang.NullPointerException (no error message)🐛 · Issue #1284 · mrousavy/react-native-vision-camera --- 任务“：react-native-vision-camera：generateJsonModelDebug”的执行失败。> java.lang.NullPointerException （无错误消息） 🐛 ·问题 #1284 ·mrousavy/react-native-vision-camera-the (github.com) (opens new window)

进入你的 android/build.gradle 并在 android/build.gradle 中为你所在的依赖项添加一个额外的类路径classpath 'com.android.tools.build:gradle:7.0.0'

上次更新: 2026/04/06, 07:07:24

← 使用SVG 打包发布→