如何在React Native CLI中扫描二维码？求适配当前版本的TSX教程或代码

依赖选择与安装 #

选用react-native-vision-camera + vision-camera-code-scanner组合，适配RN 0.68+版本，性能稳定且原生支持TypeScript。

安装命令：

npm install react-native-vision-camera vision-camera-code-scanner react-native-reanimated
# 或使用yarn
yarn add react-native-vision-camera vision-camera-code-scanner react-native-reanimated

平台配置 #

• iOS：
  进入ios目录执行pod install；在Info.plist中添加相机权限声明：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机扫描二维码</string>
  

• Android：
  在AndroidManifest.xml中添加相机权限：

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

  确保android/build.gradle中minSdkVersion不低于21。
• Reanimated配置：
  在babel.config.js中添加插件（修改后需重启Metro服务）：

  module.exports = {
    plugins: ['react-native-reanimated/plugin'],
  };
  

TSX核心实现代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Alert, PermissionsAndroid, Platform } from 'react-native';
import { Camera, useCameraPermissions } from 'react-native-vision-camera';
import { useCodeScanner } from 'vision-camera-code-scanner';

const QrScannerScreen = () => {
  const [hasPermission, setHasPermission] = useState(false);
  const { status, requestPermission } = useCameraPermissions();

  // 权限校验逻辑
  useEffect(() => {
    const checkIOSPermissions = async () => {
      if (status === 'undetermined') {
        const newStatus = await requestPermission();
        setHasPermission(newStatus === 'authorized');
      } else {
        setHasPermission(status === 'authorized');
      }
    };

    const checkAndroidPermissions = async () => {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.CAMERA,
          {
            title: '相机权限请求',
            message: '需要访问相机进行二维码扫描',
            buttonPositive: '确定',
          }
        );
        setHasPermission(granted === PermissionsAndroid.RESULTS.GRANTED);
        if (!granted) Alert.alert('权限被拒绝，无法使用扫描功能');
      } catch (err) {
        console.warn(err);
      }
    };

    Platform.OS === 'android' ? checkAndroidPermissions() : checkIOSPermissions();
  }, [status, requestPermission]);

  // 二维码扫描回调
  const codeScanner = useCodeScanner({
    codeTypes: ['qr'],
    onCodeScanned: (codes) => {
      const scannedValue = codes[0]?.value;
      if (scannedValue) {
        Alert.alert('扫描结果', scannedValue);
        // 此处可添加扫描后的业务逻辑，如跳转页面、存储数据等
      }
    },
  });

  if (!hasPermission) {
    return (
      <View style={styles.container}>
        <Text style={styles.permissionText}>请授予相机权限以使用扫描功能</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={Camera.getCameraById('back')}
        isActive={true}
        codeScanner={codeScanner}
      />
      {/* 可选：添加扫描框UI */}
      <View style={styles.scanFrame} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  permissionText: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
    marginTop: '50%',
  },
  scanFrame: {
    position: 'absolute',
    top: '30%',
    left: '15%',
    width: '70%',
    height: '40%',
    borderWidth: 2,
    borderColor: '#fff',
    borderRadius: 10,
  },
});

export default QrScannerScreen;

调试注意事项 #

• 首次运行前清理Metro缓存：执行npx react-native start --reset-cache
• 优先使用真实设备测试（部分模拟器无法正常调用相机）
• 若出现编译错误，检查RN版本与依赖版本的兼容性

内容的提问来源于stack exchange，提问作者Aerith