顾培1. React Native 图片处理实战指南
在移动应用开发中，图片处理是最基础也最常用的功能之一。作为React Native开发者，我们经常需要实现图片选择、分享等常见功能。Expo作为React Native生态中最流行的工具链之一，提供了大量开箱即用的模块来简化这些常见任务的实现。
今天我将分享两个最常用的图片处理场景：图片分享和图片选择。这两个功能看似简单，但在实际开发中会遇到各种细节问题，比如权限处理、文件路径获取、性能优化等。下面我会结合自己多年的React Native开发经验，详细解析这两个功能的实现方式，并分享一些官方文档中没有提到的实用技巧。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 使用expo-sharing实现图片分享
2.1 为什么选择expo-sharing
在React Native生态中，实现图片分享有多种方案，比如直接使用原生模块或第三方库。但expo-sharing作为Expo官方维护的模块，有以下显著优势：
- 跨平台一致性：iOS和Android上的行为一致
- 无需额外原生代码配置
- 支持多种文件类型分享
- 与Expo生态无缝集成
注意：expo-sharing只能分享本地文件，不能直接分享网络图片。如果需要分享网络图片，需要先下载到本地。
2.2 完整安装与配置
安装命令很简单：
bash复制npx expo install expo-sharing
但实际使用中有几个关键点需要注意：
- iOS额外配置：虽然Expo已经处理了大部分配置，但在iOS上分享图片到某些平台（如Instagram）时，需要在
app.json中添加以下配置：
json复制{
"expo": {
"ios": {
"infoPlist": {
"LSApplicationQueriesSchemes": ["instagram"]
}
}
}
}
- Android文件权限：在Android 10及以上版本，需要在
AndroidManifest.xml中添加文件访问权限：
xml复制<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
2.3 实际使用示例与深度解析
基础用法如文档所示：
javascript复制import * as Sharing from 'expo-sharing';
await Sharing.shareAsync(imageUri);
但实际开发中，我们需要考虑更多场景：
- 错误处理：分享可能失败，需要捕获异常
javascript复制try {
await Sharing.shareAsync(imageUri);
} catch (error) {
console.error('分享失败:', error);
// 可以在这里添加用户提示
}
- 文件存在性检查：分享前应确认文件存在
javascript复制import * as FileSystem from 'expo-file-system';
const fileInfo = await FileSystem.getInfoAsync(imageUri);
if (!fileInfo.exists) {
throw new Error('文件不存在');
}
- 分享选项定制：可以添加分享对话框的标题
javascript复制await Sharing.shareAsync(imageUri, {
dialogTitle: '分享图片',
UTI: 'public.image' // iOS专用，指定文件类型
});
- 性能优化：大文件分享前可以压缩
javascript复制import { manipulateAsync } from 'expo-image-manipulator';
const compressedImage = await manipulateAsync(
imageUri,
[{ resize: { width: 1080 } }], // 调整到1080宽度
{ compress: 0.7 } // 70%质量
);
await Sharing.shareAsync(compressedImage.uri);
2.4 常见问题与解决方案
-
文件路径问题：
- 错误：
file://路径不正确 - 解决：使用
expo-file-system正确获取文件路径
- 错误：
-
权限问题：
- 错误：Android上权限被拒绝
- 解决：动态请求权限，并处理用户拒绝的情况
-
分享选项缺失：
- 错误：分享对话框没有预期应用
- 解决：检查
LSApplicationQueriesSchemes配置
-
大文件处理：
- 错误：分享大文件卡顿或失败
- 解决：提前压缩图片，或分块处理
3. 使用expo-image-picker选择图片
3.1 模块选择考量
图片选择是另一个高频需求，expo-image-picker提供了完整的解决方案：
- 统一的API跨平台使用
- 支持相册和相机两种来源
- 内置权限处理
- 支持图片裁剪和基本编辑
3.2 安装与基础权限配置
安装命令：
bash复制npx expo install expo-image-picker
权限配置：
在app.json中添加所需权限：
json复制{
"expo": {
"ios": {
"infoPlist": {
"NSPhotoLibraryUsageDescription": "允许访问相册以选择图片",
"NSCameraUsageDescription": "允许使用相机拍照",
"NSMicrophoneUsageDescription": "允许录制视频时使用麦克风"
}
},
"android": {
"permissions": [
"android.permission.CAMERA",
"android.permission.READ_EXTERNAL_STORAGE",
"andr