如何在React Native相机视图上显示自定义操作按钮？

阿华AIGC实验室

2026-5-27

当然有办法啦！不过得根据你的需求灵活选择方案——毕竟react-native-image-picker的默认相机界面是原生封装的，直接修改有一定限制，下面给你两种可行的思路：

方案一：利用react-native-image-picker自带的customButtons配置

这是最简单的实现方式，不需要额外依赖，直接借助库本身提供的配置就能添加自定义按钮。

具体步骤：

在调用launchCamera方法时，传入包含customButtons的配置对象
在回调中监听customButtonPress事件，处理按钮点击逻辑

代码示例：

import ImagePicker from 'react-native-image-picker';

// 定义相机配置选项
const cameraOptions = {
  title: '拍摄照片',
  // 添加自定义按钮
  customButtons: [
    { name: 'my_custom_btn', title: '我的自定义操作' },
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

// 打开相机
ImagePicker.launchCamera(cameraOptions, (response) => {
  if (response.didCancel) {
    console.log('用户取消了拍摄');
  } else if (response.error) {
    console.log('相机调用出错:', response.error);
  } else if (response.customButtonPress) {
    // 匹配自定义按钮的name，执行对应操作
    if (response.customButtonPress === 'my_custom_btn') {
      alert('你触发了自定义操作！');
      // 在这里编写你的业务逻辑，比如切换摄像头、打开相册等
    }
  } else {
    // 处理拍摄完成的图片
    const imageSource = { uri: response.uri };
    // 可用于显示或上传图片
  }
});

优缺点说明：

优点：快速集成，无需额外安装依赖，代码改动小
缺点：自定义程度有限，按钮的样式、位置由原生控件决定，无法完全自由定制布局

方案二：使用自定义相机组件实现完全可控的界面

如果需要更灵活的UI定制（比如把按钮放在任意位置、自定义按钮样式/动画等），react-native-image-picker的默认相机就满足不了需求了。这时候可以用react-native-vision-camera（原react-native-camera的替代库，维护更活跃）来搭建自己的相机界面，实现完全可控的布局。

具体步骤：

安装依赖并配置权限
编写自定义相机组件，添加任意自定义按钮

代码示例：

# 先安装依赖
npm install react-native-vision-camera
# 或使用yarn
yarn add react-native-vision-camera

自定义相机组件：

import React, { useState, useRef, useEffect } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import { Camera, useCameraDevices, takePicture } from 'react-native-vision-camera';

const CustomCamera = () => {
  const [hasCameraPermission, setHasCameraPermission] = useState(false);
  const [capturedPhoto, setCapturedPhoto] = useState(null);
  const cameraRef = useRef(null);
  const devices = useCameraDevices();
  const backCamera = devices.back; // 切换前置摄像头可改为devices.front

  // 请求相机权限
  useEffect(() => {
    (async () => {
      const permissionStatus = await Camera.requestCameraPermission();
      setHasCameraPermission(permissionStatus === 'authorized');
    })();
  }, []);

  // 拍照逻辑
  const handleCapture = async () => {
    if (!cameraRef.current) return;
    const photo = await takePicture(cameraRef.current, { quality: 0.8 });
    setCapturedPhoto(photo);
    // 可在此处处理图片保存、上传等操作
  };

  // 自定义按钮的操作逻辑
  const handleCustomAction = () => {
    alert('自定义按钮被触发！');
    // 编写你的业务逻辑，比如打开相册、切换滤镜等
  };

  if (!backCamera || !hasCameraPermission) {
    return <View style={styles.emptyContainer} />;
  }

  return (
    <View style={styles.container}>
      {/* 照片预览或相机视图 */}
      {capturedPhoto ? (
        <Image source={{ uri: capturedPhoto.path }} style={styles.preview} />
      ) : (
        <Camera
          style={styles.camera}
          device={backCamera}
          isActive={true}
          ref={cameraRef}
        />
      )}
      {/* 自定义按钮区域 */}
      <View style={styles.buttonBar}>
        <Button title="拍照" onPress={handleCapture} />
        <Button title="自定义操作" onPress={handleCustomAction} color="#ff6347" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  camera: {
    flex: 1,
  },
  preview: {
    flex: 1,
    resizeMode: 'contain',
  },
  buttonBar: {
    position: 'absolute',
    bottom: 30,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
});

export default CustomCamera;

优缺点说明：