如何在React Native中用react-native-camera实现可返回图片的自定义相机组件

你可以封装一个内置Modal的相机组件，暴露异步调用方法，调用时自动唤起相机弹窗，拍摄完成后通过Promise返回图片结果，完全对齐react-native-image-picker的launchCamera调用逻辑，同时可以自由扩展自定义控制UI。

1. 安装react-native-camera依赖

npm install react-native-camera --save
# 或者使用yarn
yarn add react-native-camera

2. 权限配置

• iOS端：在ios/项目名/Info.plist中添加相机、相册权限声明
• 安卓端：在android/app/src/main/AndroidManifest.xml中添加相机、存储权限声明

以下是完整组件代码示例，内置了取消、拍照、切换前后摄像头三个基础控制项，你可以根据需求自行添加闪光灯控制、比例调整等自定义功能：

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Text, Modal, StyleSheet } from 'react-native';
import { RNCamera } from 'react-native-camera';

const CustomCamera = ({ visible, onResult }) => {
  const cameraRef = useRef(null);
  const [cameraType, setCameraType] = useState(RNCamera.Constants.Type.back);

  // 拍照逻辑
  const handleTakePicture = async () => {
    if (!cameraRef.current) return;
    const photoData = await cameraRef.current.takePictureAsync({
      quality: 0.8,
      base64: false,
      exif: false
    });
    onResult({ status: 'success', data: photoData });
  };

  // 切换前后摄像头
  const handleSwitchCamera = () => {
    setCameraType(
      cameraType === RNCamera.Constants.Type.back 
        ? RNCamera.Constants.Type.front 
        : RNCamera.Constants.Type.back
    );
  };

  // 关闭相机
  const handleClose = () => {
    onResult({ status: 'cancel' });
  };

  if (!visible) return null;

  return (
    <Modal visible={visible} animationType='slide' presentationStyle='fullScreen'>
      <RNCamera
        ref={cameraRef}
        style={styles.camera}
        type={cameraType}
        captureAudio={false}
      >
        {/* 自定义控制栏区域，可自由添加控制项 */}
        <View style={styles.controlBar}>
          <TouchableOpacity onPress={handleClose} style={styles.btn}>
            <Text style={styles.btnText}>取消</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={handleTakePicture} style={styles.captureBtn} />
          <TouchableOpacity onPress={handleSwitchCamera} style={styles.btn}>
            <Text style={styles.btnText}>切换</Text>
          </TouchableOpacity>
        </View>
      </RNCamera>
    </Modal>
  );
};

const styles = StyleSheet.create({
  camera: {
    flex: 1,
    justifyContent: 'flex-end'
  },
  controlBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingBottom: 30,
    paddingHorizontal: 20
  },
  btn: {
    width: 60,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnText: {
    color: '#fff',
    fontSize: 16
  },
  captureBtn: {
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: '#fff',
    borderWidth: 4,
    borderColor: '#ccc'
  }
});

// 封装全局调用方法
let cameraRef = null;
export const launchCustomCamera = (options = {}) => {
  return new Promise((resolve) => {
    cameraRef = { resolve };
    // 此处可配合react-native-root-siblings库动态插入组件到顶层，无需在每个页面引入
    // 也可直接将CustomCamera挂载到App根节点，通过根节点状态控制显隐
  });
};

export default CustomCamera;

你可以在任意业务页面直接通过函数调用唤起相机，和react-native-image-picker的使用逻辑完全一致：

import { launchCustomCamera } from './CustomCamera';

// 调用示例
const takePhoto = async () => {
  const res = await launchCustomCamera();
  if (res.status === 'success') {
    // 拍摄成功，res.data.uri就是图片路径，可以直接用于渲染或者上传
    console.log('拍摄的图片路径：', res.data.uri);
  }
};

如果需要添加更多自定义控制功能，直接在控制栏区域添加对应按钮，绑定RNCamera的对应属性即可：

• 闪光灯控制：修改RNCamera的flashMode属性，支持开关、自动等模式
• 照片比例调整：修改RNCamera的ratio属性，设置支持的拍摄比例
• 网格线显示：自定义叠加网格UI层到相机预览区域即可

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