如何使用React Native连接手机摄像头并实时查看画面？

能否实现？ #

完全可以。React Native通过第三方原生桥接库，能直接调用手机摄像头硬件，实现实时画面预览，满足类似监控的需求。

具体实现步骤 #

1. 选择合适的摄像头库 #

推荐使用 react-native-vision-camera（较新，功能丰富）或 react-native-camera（稳定，社区成熟）。这里以react-native-vision-camera为例：

2. 安装依赖 #

执行命令：

npm install react-native-vision-camera
# 或者 yarn
yarn add react-native-vision-camera

iOS需额外执行pod安装：

cd ios && pod install && cd ..

3. 配置摄像头权限 #

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

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

• iOS：在Info.plist中添加权限描述：

<key>NSCameraUsageDescription</key>
<string>需要访问摄像头以实现实时监控</string>

4. 编写基础实时预览代码 #

创建组件，请求权限并渲染摄像头预览：

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { Camera, useCameraPermissions } from 'react-native-vision-camera';

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

  useEffect(() => {
    if (status === 'not-determined') {
      requestPermission().then(granted => setHasPermission(granted));
    } else {
      setHasPermission(status === 'granted');
    }
  }, [status]);

  if (!hasPermission) {
    return (
      <View>
        <Text>需要摄像头权限</Text>
        <Button title="请求权限" onPress={requestPermission} />
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        device={Camera.getCameraById('back')} // 使用后置摄像头，可改为'front'切换前置
        isActive={true} // 开启实时预览
      />
    </View>
  );
};

export default CameraMonitor;

注意事项 #

• 必须在真机上测试，模拟器通常无法正常调用摄像头。
• 若需要扩展录制、拍照功能，可调用库对应的API（如Camera.takePhoto()）。
• 不同设备的摄像头兼容性有差异，建议在目标设备上验证效果。

参考学习资源 #

• 直接查看所选库的官方文档，里面有详细的API说明和示例代码。
• 在React Native社区论坛搜索摄像头相关关键词，能找到大量实战案例和问题解决方案。

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