如何在Expo项目中使用react-native-image-marker添加图片水印？

1. 先检查导入与初始化是否正确 #

• 别搞错导入方式，这类报错很多时候是引用对象出错导致的。正确的导入写法参考：

  import Marker from 'react-native-image-marker';
  

  如果库是命名导出，就改成解构导入，比如import { Marker } from 'react-native-image-marker';，具体以库的官方文档为准。
• Expo环境下，尽量在组件挂载完成后再调用库的方法，避免在初始化阶段调用导致库还未加载完成。

2. 验证库版本与Expo的兼容性 #

• react-native-image-marker和Expo SDK可能存在版本适配问题，先查看库的README确认支持的Expo版本。如果当前使用的Expo SDK较新，试试升级或降级库的版本：

  npm uninstall react-native-image-marker
  npm install react-native-image-marker@x.x.x
  

  把x.x.x替换为和你当前Expo SDK匹配的版本号。

3. 核对markText的调用参数格式 #

• 参数不符合要求也会触发内部函数报错，确保所有参数都严格遵循库的要求，示例代码如下：

  Marker.markText({
    imagePath: '你的图片URI', // Expo中本地资源要传require的结果或FileSystem获取的URI，不能直接写相对路径
    text: '水印文字',
    X: 10,
    Y: 10,
    color: '#ffffff',
    fontSize: 16,
    // 其他必填参数按文档补全
  }).then(result => console.log(result))
    .catch(err => console.error(err));
  

  比如本地图片要写成require('./assets/test.jpg')，网络图片直接传入对应的URI即可。

4. 尝试Expo原生替代方案 #

如果这个库在Expo环境下兼容性问题较多，直接用Expo自带工具实现水印更靠谱，比如结合expo-canvas绘制文字水印：

import { Canvas, Text, Image, renderAsync } from 'expo-canvas';

async function addTextWatermark(imageUri, watermarkText) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = imageUri;
  await img.decode();

  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 设置水印样式
  ctx.fillStyle = 'rgba(255,255,255,0.7)';
  ctx.font = '16px sans-serif';
  ctx.fillText(watermarkText, 10, img.height - 10);

  return await renderAsync(canvas);
}

调用这个方法就能生成带文字水印的图片URI，可直接用于展示或保存。

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