React Native 0.79.2项目中react-native-camera-kit首次安装APK后黑屏及启动延迟问题求助

嘿，我之前在RN 0.7x版本里用react-native-camera-kit也碰到过一模一样的黑屏和启动慢问题，结合你贴的代码来看，核心问题出在相机权限时机和组件初始化逻辑上，给你几个亲测有效的解决方案：

1. 先搞定相机权限，再谈渲染 #

很多时候首次安装黑屏就是因为权限还没拿到，相机组件就已经开始初始化了。Android 6.0+必须要动态申请权限，光在Manifest里加配置完全不够：

首先在android/app/src/main/AndroidManifest.xml里确保权限都加全：

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

然后在代码里用PermissionsAndroid动态申请权限，并且在权限通过后再允许相机渲染：

import { PermissionsAndroid, View, Text, Button, ActivityIndicator } from 'react-native';

// 新增权限请求函数
const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "需要相机权限",
        message: "本应用需要访问你的相机来扫描条码",
        buttonPositive: "允许",
        buttonNegative: "拒绝"
      }
    );
    setCanScan(granted === PermissionsAndroid.RESULTS.GRANTED);
  } catch (err) {
    console.warn('权限请求出错:', err);
    setCanScan(false);
  }
};

// 修改useFocusEffect，先请求权限再重置相机key
useFocusEffect(
  useCallback(() => {
    requestCameraPermission();
    setCameraKey(prev => prev + 1);
    
    // 清理超时任务
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = null;
      }
    };
  }, [])
);

2. 加条件渲染和加载状态，避免黑屏尴尬 #

不要直接硬渲染相机组件，先判断权限和相机是否准备好，用加载动画替代黑屏：

// 新增相机准备状态
const [isCameraReady, setIsCameraReady] = useState(false);

return (
  <View style={{ flex: 1 }}>
    {canScan ? (
      <>
        <Camera 
          key={cameraKey} 
          style={{ flex: 1 }} 
          scanBarcode={true} 
          showFrame={false} 
          laserColor="#F27D08" 
          frameColor="black" 
          onReadCode={handleCodeRead}
          // 相机准备好后关闭加载动画
          onCameraReady={() => setIsCameraReady(true)}
        />
        {/* 相机初始化时显示加载动画，替代黑屏 */}
        {!isCameraReady && (
          <View style={{
            position: 'absolute',
            top: 0, left: 0, right: 0, bottom: 0,
            backgroundColor: 'rgba(0,0,0,0.8)',
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <ActivityIndicator color="#F27D08" size="large" />
            <Text style={{ color: 'white', marginTop: 16 }}>正在启动相机...</Text>
          </View>
        )}
      </>
    ) : (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>请授予相机权限以使用扫描功能</Text>
        <Button title="重新申请权限" onPress={requestCameraPermission} />
      </View>
    )}
  </View>
);

3. 额外优化建议 #

• 版本兼容性：确保你用的react-native-camera-kit版本支持RN 0.79.2，建议升级到^13.0.0及以上版本。
• 清理缓存：每次修改权限或依赖后，记得运行cd android && ./gradlew clean，然后重新打包release APK，避免缓存导致的异常。
• 测试release包：debug模式下RN本身启动就慢，首次安装黑屏可能是debug环境的锅，一定要用release包测试真实场景。

内容来源于stack exchange