Android11+下React Native共享Scoped Storage图片至WhatsApp遇格式不支持问题

问题根源在于你使用的content://开头的URI是Android系统的内容提供者URI，并非直接的文件路径，WhatsApp无法直接解析这类URI，因此抛出格式不支持的错误。要解决这个问题，需要先将该URI对应的文件复制到应用可访问的临时目录，再分享临时文件的路径。

具体实现步骤 #

1. 安装文件处理依赖
   使用react-native-fs库来处理文件复制操作：

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

2. 修改分享逻辑
   替换原有的shareImage函数，先将content URI对应的文件复制到临时目录，再分享临时文件的file://路径：

   import RNFS from 'react-native-fs';
   import { Share } from 'react-native';
   
   const shareImage = async () => {
     try {
       const contentUri = props.source.uri;
       // 提取文件名和扩展名（可根据实际图片类型调整，这里以jpg为例）
       const fileName = `shared_image_${Date.now()}.jpg`;
       const tempFilePath = `${RNFS.TemporaryDirectoryPath}/${fileName}`;
   
       // 将content URI对应的文件复制到临时目录
       await RNFS.copyFile(contentUri, tempFilePath);
   
       // 分享临时文件
       const shareOptions = {
         title: 'Share Image',
         url: `file://${tempFilePath}`,
       };
       const shareResponse = await Share.open(shareOptions);
       console.log('Share Response', shareResponse);
   
       // 分享完成后可手动删除临时文件（可选）
       setTimeout(() => {
         RNFS.unlink(tempFilePath).catch(err => console.error('Failed to delete temp file:', err));
       }, 5000);
     } catch (error) {
       console.error('Error sharing image:', error);
     }
   };
   

3. 配置Android权限
   在android/app/src/main/AndroidManifest.xml中添加读取外部存储的权限（针对Android 10及以下）：

   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   

   Android 11+ 下Scoped Storage默认允许访问媒体文件，无需额外权限；若涉及非媒体文件，需做特殊权限适配。

关键说明 #

• 确保复制后的文件扩展名正确（如.jpg、.png），WhatsApp依赖扩展名识别文件类型。
• 临时文件使用RNFS.TemporaryDirectoryPath，系统会自动清理该目录，也可手动在分享后删除。
• 若不确定图片类型，可通过Android内容提供者查询获取MIME类型，再匹配对应的扩展名。

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