React Native保存视图至相机胶卷时出现ENOENT错误：文件不存在且保存图片为0字节无法打开

嘿，我一眼就看到几个关键问题导致你遇到这个保存失败的情况，咱们一步步来解决：

核心问题：你保存的不是合成后的视图！ #

你当前代码里直接调用CameraRoll.save(this.state.fileUri)，但这个fileUri是你从相册/相机选的原始图片的地址，而你界面上叠加了top/bottom文字的合成视图根本没被捕获保存——这是最关键的错误！另外还有权限处理和临时文件的问题。

具体修复步骤 #

1. 安装视图捕获库 #

要保存带文字的合成视图，你需要先把整个视图转换成图片文件，推荐用react-native-view-shot：

npm install react-native-view-shot --save
# 或者用yarn
yarn add react-native-view-shot

（RN 0.60+版本会自动完成link，无需额外配置）

2. 调整视图结构，添加可捕获的Ref #

把包含图片和文字的外层View加上ref，这样才能捕获整个合成的meme视图：
在你的render()里，修改这部分代码：

<View style={{ flex: 5, alignItems: 'center', justifyContent: 'space-between' }} ref={ref => this.memeView = ref}>
  {this.renderImage()}
  <Text style={styles.memeTop}>{top}</Text>
  <Text style={styles.memeBottom}>{bottom}</Text>
</View>

3. 修正权限获取的异步调用 #

你之前的onSaveImage里调用getPermissionAndroid的方式完全错误，没有等待异步操作完成，修改成：

// 先在顶部导入captureRef
import { captureRef } from 'react-native-view-shot';

// 然后修改onSaveImage函数
onSaveImage = async () => {
  try {
    // 先获取权限
    if (Platform.OS === 'android') {
      const granted = await this.getPermissionAndroid();
      if (!granted) {
        return;
      }
    }

    // 捕获视图为图片文件
    const capturedUri = await captureRef(this.memeView, {
      format: 'jpg',
      quality: 0.8,
    });

    // 保存到相机胶卷
    await CameraRoll.save(capturedUri, 'photo');
    
    Alert.alert(
      '',
      'Image saved successfully.',
      [{ text: 'OK', onPress: () => { } }],
      { cancelable: false },
    );
  } catch (error) {
    console.error('保存失败:', error);
    Alert.alert('保存失败', error.message);
  }
};

4. 修正getPermissionAndroid的返回值 #

你的getPermissionAndroid函数在权限被拒绝时没有明确返回false，补充一下：

getPermissionAndroid = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        title: 'Image Save Permission',
        message: 'Your permission is required to save images to your device',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      return true;
    }
    Alert.alert(
      '',
      'Your permission is required to save images to your device',
      [{ text: 'OK', onPress: () => { } }],
      { cancelable: false },
    );
    return false; // 权限被拒绝时返回false
  } catch (err) {
    console.log('权限请求错误', err);
    return false;
  }
};

为什么之前会报错？ #

你遇到的ENOENT错误，是因为react-native-image-picker的临时文件会在应用重启或一段时间后被系统清理，你直接保存这个临时uri的时候，文件可能已经不存在了——而且就算存在，你保存的也只是原始图片，不是你合成的带文字的meme！

现在按照上面的步骤修改后，就能正确捕获并保存你想要的合成视图了。

内容的提问来源于stack exchange，提问作者ks.Maras