React Native 0.77.1中react-native-camera使用异常求助

问题现象 #

• 相机打开后立即关闭
• 报错：Attempt to invoke virtual method 'module.getEventDispatcher' on a null object reference
• 偶尔仅显示加载指示器，无法正常启动相机

环境与配置 #

package.json 依赖 #

"dependencies": {
  "react": "18.3.1",
  "react-native": "0.77.1",
  "react-native-camera": "^4.2.1",
  "react-native-permissions": "^5.2.5",
  "react-native-qrcode-scanner": "^1.5.5"
}

Android 权限 #

已在 AndroidManifest.xml 中正确配置相机相关权限

相机组件代码（CameraScreen.tsx） #

import React, { useState, useRef, useEffect } from 'react';
import { View, Alert, Button, Platform } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const CameraScreen = () => {
  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
  const cameraRef = useRef<RNCamera>(null);

  useEffect(() => {
    const requestCameraPermission = async () => {
      const permission =
        Platform.OS === 'android'
          ? PERMISSIONS.ANDROID.CAMERA
          : PERMISSIONS.IOS.CAMERA;

      const result = await request(permission);
      setHasPermission(result === RESULTS.GRANTED);
    };

    requestCameraPermission();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {hasPermission ? (
        <RNCamera
          ref={cameraRef}
          style={{ flex: 1 }}
          type={RNCamera.Constants.Type.back}
          onCameraReady={() => console.log('Camera is ready')}
          captureAudio={false}
        />
      ) : (
        <Button title="Request Camera Permission" onPress={() => requestCameraPermission()} />
      )}
    </View>
  );
};

export default CameraScreen;

已尝试的排查操作 #

• 验证权限：react-native-permissions 返回 GRANTED，权限已正常获取
• 确认 android/build.gradle 中 minSdkVersion 为21
• 执行 react-native link react-native-camera 手动链接
• 执行 ./gradlew clean && react-native run-android 清理重建项目
• 尝试升级 react-native-camera 至最新版本
• 考虑切换到 react-native-vision-camera

解决方案建议 #

1. 取消手动链接：React Native 0.60+ 已支持自动链接，手动链接可能导致冲突，执行 react-native unlink react-native-camera 后重新编译项目
2. 补全Android权限配置：Android 10+ 需确保 AndroidManifest.xml 包含以下权限：

   <uses-permission android:name="android.permission.CAMERA" />
   <uses-feature android:name="android.hardware.camera" />
   <uses-feature android:name="android.hardware.camera.autofocus" />
   

3. 添加相机销毁逻辑：在组件卸载时释放相机资源，避免内存泄漏：

   useEffect(() => {
     return () => {
       cameraRef.current?.releaseCamera();
     };
   }, []);
   

4. 降级react-native-camera版本：最新版本可能与RN 0.77.1存在兼容性问题，尝试锁定版本为 4.1.3，执行 npm install react-native-camera@4.1.3 后重建
5. 切换至react-native-vision-camera：react-native-camera 已停止维护，react-native-vision-camera 适配最新RN版本，功能更稳定、丰富，是长期替代方案

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