如何在React Native Camera（RN Camera）中添加文字和图片水印

推荐实现方案（低复杂度，兼容性强） #

通过「相机预览层叠加水印视图 + 全局视图截图」的方式实现，无需复杂的图片像素处理操作，支持文字、图片等任意形式的水印。

1. 安装依赖 #

需要安装两个核心库：

• react-native-camera：相机基础能力支持
• react-native-view-shot：视图截图能力支持

安装命令：

npm install react-native-camera react-native-view-shot
# 或使用yarn
yarn add react-native-camera react-native-view-shot

安装完成后根据对应库的要求完成原生端权限配置，包括相机权限、存储读写权限。

2. 组件布局结构 #

布局核心逻辑为：最外层包裹截图组件，内部相机组件占满全屏，水印视图通过绝对定位悬浮在相机层上方。
示例代码：

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

const CameraWithWatermark = () => {
  const cameraRef = useRef(null);
  const viewShotRef = useRef(null);
  const [showOperateBtn, setShowOperateBtn] = useState(true);

  // 拍摄并生成带水印图片
  const takePhotoWithWatermark = async () => {
    try {
      // 先隐藏操作按钮，避免被截入图片
      setShowOperateBtn(false);
      // 延迟100ms确保视图更新完成后再截图
      setTimeout(async () => {
        // 截图得到带水印的图片uri
        const watermarkedImageUri = await viewShotRef.current.capture({
          format: 'jpg',
          quality: 0.9
        });
        // 恢复操作按钮显示
        setShowOperateBtn(true);
        // 此处可添加图片保存到本地、上传等后续逻辑
        console.log('带水印的图片地址：', watermarkedImageUri);
      }, 100);
    } catch (err) {
      console.error('拍摄出错：', err);
      setShowOperateBtn(true);
    }
  };

  return (
    <ViewShot ref={viewShotRef} style={styles.container}>
      <RNCamera
        ref={cameraRef}
        style={styles.camera}
        captureAudio={false}
        type={RNCamera.Constants.Type.back}
      >
        {/* 水印视图，可自定义为任意内容：文字、图片、logo等 */}
        <View style={styles.watermark}>
          <Text style={styles.watermarkText}>自定义水印内容</Text>
        </View>

        {/* 拍摄操作按钮 */}
        {showOperateBtn && (
          <TouchableOpacity style={styles.shootBtn} onPress={takePhotoWithWatermark} />
        )}
      </RNCamera>
    </ViewShot>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  camera: {
    flex: 1,
    position: 'relative'
  },
  watermark: {
    position: 'absolute',
    bottom: 40,
    right: 30,
    backgroundColor: 'rgba(0,0,0,0.3)',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 4
  },
  watermarkText: {
    color: '#fff',
    fontSize: 14
  },
  shootBtn: {
    position: 'absolute',
    bottom: 30,
    alignSelf: 'center',
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: '#fff'
  }
});

export default CameraWithWatermark;

注意事项 #

• 水印视图的层级需要高于相机层，可通过zIndex属性调整避免被遮挡
• 水印位置建议使用屏幕宽高的比例计算，避免不同分辨率设备上水印位置偏移
• 如果需要更高清的图片效果，可先调用相机的takePictureAsync方法获取高清原图，再通过图片编辑库叠加水印，适合对图片精度要求高的场景
• 截图前需隐藏不需要出现在图片中的操作类元素，拍摄完成后再恢复显示

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