React Native iOS中QRCodeScanner相机未授权问题求助

Hey there, let's work through this camera authorization issue step by step—since your system camera works fine, we can rule out hardware problems and focus on React Native/iOS setup details. Here are actionable fixes to try:

1. Fix Info.plist Permission Format & Content #

It sounds like you added the required keys, but incorrect formatting or missing descriptive text can cause iOS to ignore permission requests. Make sure your ios/[ProjectName]/Info.plist uses proper XML structure, with each permission paired with a clear reason (iOS requires this for user consent):

<dict>
  <!-- ... keep existing keys ... -->
  <key>NSCameraUsageDescription</key>
  <string>We need access to your camera to take photos and scan content</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>We need access to your photo library to save and select images</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>We need access to your microphone to record video (optional for photo-only use)</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>We need access to save photos you take to your library</string>
</dict>

• Double-check spelling (iOS permission keys are case-sensitive).
• Ensure all entries are inside the top-level <dict> tag of your Info.plist.

2. Manually Request Permissions Before Initializing the Camera #

Sometimes react-native-camera doesn't trigger permission requests correctly, especially if you disable audio capture. Try explicitly asking for permissions first:

For iOS (using react-native-permissions): #

Install a compatible version for RN 0.63:

npm install react-native-permissions@^2.2.0 --save
cd ios && pod install

Add this permission check before rendering the camera:

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const checkCameraPermission = async () => {
  const status = await request(PERMISSIONS.IOS.CAMERA);
  if (status === RESULTS.GRANTED) {
    console.log('Camera permission granted!');
    // Initialize your camera component here
  } else {
    console.log('Camera permission denied:', status);
    // Show an alert or redirect users to app settings
  }
};

// Call this in your component's useEffect or componentDidMount
useEffect(() => {
  checkCameraPermission();
}, []);

For Android (built-in PermissionsAndroid): #

import { PermissionsAndroid } from 'react-native';

const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Camera Permission Request',
        message: 'We need access to your camera to take photos',
        buttonPositive: 'Allow',
        buttonNegative: 'Cancel',
      },
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.warn(err);
    return false;
  }
};

3. Validate react-native-camera Setup & Dependencies #

Since you're on RN 0.63.2 (auto-linking era), double-check library integration:

1. Run npx react-native link react-native-camera (manual link can fix auto-linking inconsistencies).
2. Navigate to your ios folder and run pod install --repo-update to refresh dependencies.
3. Confirm your Podfile includes this entry:

pod 'react-native-camera', :path => '../node_modules/react-native-camera'

4. Check System-Level App Permissions #

It's easy to accidentally disable app permissions in iOS settings. Go to:

Settings > [Your App Name] > Camera
Ensure the toggle is switched to "On". If it was off, enable it and restart your app.

5. Clear Cache & Rebuild the Entire Project #

Old build caches can persist and ignore new permission configs. Follow these steps:

1. Clear React Native's cache:

npx react-native start --reset-cache

2. Delete iOS build artifacts:

cd ios
rm -rf build Pods Podfile.lock
pod install

3. Rebuild and run the app:

npx react-native run-ios

6. Test with a Minimal Camera Component #

Rule out issues in your existing code by creating a minimal test component:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { RNCamera } from 'react-native-camera';

const TestCamera = () => {
  const [hasPermission, setHasPermission] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await RNCamera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) return <View />;
  if (hasPermission === false) return <Text>No access to camera</Text>;
  
  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        captureAudio={false}
      />
    </View>
  );
};

export default TestCamera;

If this works, the issue is likely in your original camera component's props or logic.

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