Expo v.51 无法扫描二维码

Question

尝试在 React Native 项目和 Android 中使用带有最新 Expo 版本 51 的 expo-camera 时，似乎无法扫描任何类型的代码。当我将相机转为二维码时，实际上什么也没有发生。我使用下面的代码：

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';

import Screen from './Screen';
import TextHyperlink from '../components/TextHyperlink';

function ScannerScreen() {
    const [scanned, setScanned] = useState(false);
    const [result, setResult] = useState(null);
    const [permission, requestPermission] = useCameraPermissions();

    if (!permission) {
        return <View />;
    }

    if (!permission.granted) {
        return (
            <View style={styles.container}>
                <Text style={{ textAlign: 'center' }}>
                    We need your permission to show the camera
                </Text>
                <Button onPress={requestPermission} title='grant permission' />
            </View>
        );
    }

    const handleBarCodeScanned = ({ data }) => {
        console.log('lalalalala');
        if (data) {
            setScanned(true);
            setResult(data);
        }
    };

    const handleResult = () => {
        if (!result) return null;

        if (result.startsWith('http')) {
            return (
                <TextHyperlink
                    style={styles.resultlink}
                    text={result}
                    url={result}
                />
            );
        } else {
            return <Text style={styles.resulttext}>{result}</Text>;
        }
    };

    return (
        <Screen>
            <View style={styles.camerabox}>
                <CameraView
                    barcodeScannerSettings={{
                        barcodeTypes: [
                            'aztec',
                            'ean13',
                            'ean8',
                            'qr',
                            'pdf417',
                            'upc_e',
                            'datamatrix',
                            'code39',
                            'code93',
                            'itf14',
                            'codabar',
                            'code128',
                            'upc_a',
                        ],
                    }}
                    onBarCodeScanned={
                        scanned ? undefined : handleBarCodeScanned
                    }
                    style={StyleSheet.absoluteFillObject}
                />
                {scanned && (
                    <Button
                        title={'Tap to Scan Again'}
                        onPress={() => setScanned(false)}
                    />
                )}
            </View>
            <View style={styles.textbox}>{handleResult()}</View>
        </Screen>
    );
}

const styles = StyleSheet.create({
    camerabox: {
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
    resultlink: {
        color: 'blue',
        flexWrap: 'wrap',
        fontFamily: 'monospace',
        padding: 20,
        textDecorationLine: 'underline',
    },
    resulttext: {
        color: 'white',
        flexWrap: 'wrap',
        fontFamily: 'monospace',
        padding: 20,
    },
    textbox: {
        borderTopColor: 'blue',
        borderTopWidth: 3,
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
});

export default ScannerScreen;

使用的依赖项：

"expo": "~51.0.21"
"expo-camera": "^15.0.14"
"react-native": "0.74.3"

Expo 51 使用 expo-camera 和 useCameraPermissions()，而不是 requestCameraPermissionsAsync()。

事实是我的代码与 Expo 50 完美配合。

Answer 1

请注意，我已将 CameraView 替换为 expo-camera 中的 Camera，并在 Camera 组件内添加了 expo-barcode-scanner 中的 BarCodeScanner 组件。这应该允许您使用相机扫描条形码。

Expo BarCodeScanner：https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/

import React, { useState } from 'eact';
import { Text, View, StyleSheet, Button } from 'eact-native';
import { Camera, useCameraPermissions } from 'expo-camera';
import { BarCodeScanner } from 'expo-barcode-scanner';

import Screen from './Screen';
import TextHyperlink from '../components/TextHyperlink';

function ScannerScreen() {
    const [scanned, setScanned] = useState(false);
    const [result, setResult] = useState(null);
    const [permission, requestPermission] = useCameraPermissions();

    if (!permission) {
        return <View />;
    }

    if (!permission.granted) {
        return (
            <View style={styles.container}>
                <Text style={{ textAlign: 'center' }}>
                    We need your permission to show the camera
                </Text>
                <Button onPress={requestPermission} title='grant permission' />
            </View>
        );
    }

    const handleBarCodeScanned = ({ data }) => {
        console.log('lalalalala');
        if (data) {
            setScanned(true);
            setResult(data);
        }
    };

    const handleResult = () => {
        if (!result) return null;

        if (result.startsWith('http')) {
            return (
                <TextHyperlink
                    style={styles.resultlink}
                    text={result}
                    url={result}
                />
            );
        } else {
            return <Text style={styles.resulttext}>{result}</Text>;
        }
    };

    return (
        <Screen>
            <View style={styles.camerabox}>
                <Camera
                    style={StyleSheet.absoluteFillObject}
                    type={Camera.Constants.Type.back}
                >
                    <BarCodeScanner
                        onBarCodeScanned={handleBarCodeScanned}
                        style={StyleSheet.absoluteFillObject}
                    />
                </Camera>
                {scanned && (
                    <Button
                        title={'Tap to Scan Again'}
                        onPress={() => setScanned(false)}
                    />
                )}
            </View>
            <View style={styles.textbox}>{handleResult()}</View>
        </Screen>
    );
}

const styles = StyleSheet.create({
    camerabox: {
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
    resultlink: {
        color: 'blue',
        flexWrap: 'wrap',
        fontFamily: 'onospace',
        padding: 20,
        textDecorationLine: 'underline',
    },
    resulttext: {
        color: 'white',
        flexWrap: 'wrap',
        fontFamily: 'onospace',
        padding: 20,
    },
    textbox: {
        borderTopColor: 'blue',
        borderTopWidth: 3,
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
});

export default ScannerScreen;