在 React Native 中使用 Web Worker 来实现文件上传是一个不错的思路，尤其是当你希望避免阻塞主线程时。Web Worker 允许你在后台线程中执行 JavaScript 代码，从而避免影响 UI 的流畅性。
然而，React Native 默认并不支持 Web Worker（因为它是基于 JavaScriptCore 或 Hermes 引擎的，而不是浏览器环境）。因此，我们需要借助一些第三方库来实现类似的功能。
使用 react-native-workers 实现 Web Worker
react-native-workers 是一个可以在 React Native 中实现类似 Web Worker 功能的库。它允许你在单独的线程中运行 JavaScript 代码。
下面是一个完整的 React Native 项目案例，展示了如何使用 react-native-workers 和 react-native-image-picker 来实现文件上传功能。
初始化项目
首先，创建一个新的 React Native 项目：
npx react-native init FileUploadApp
cd FileUploadApp2. 安装依赖
安装所需的依赖库：
npm install react-native-workers react-native-image-picker对于 iOS，还需要安装 CocoaPods 依赖：
cd ios && pod install && cd ..3. 创建 Worker 文件
在项目的根目录下创建一个 fileUploadWorker.js 文件，这个文件将作为 Worker 线程运行的代码。
// fileUploadWorker.js
import { expose } from 'react-native-workers';
const uploadFile = async (fileUri) => {
try {
const formData = new FormData();
formData.append('file', {
uri: fileUri,
name: 'file.jpg',
type: 'image/jpeg',
});
const response = await fetch('https://your-upload-endpoint.com/upload', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (!response.ok) {
throw new Error('Upload failed');
}
return await response.json();
} catch (error) {
console.error('Error uploading file:', error);
throw error;
}
};
expose({ uploadFile });4. 修改 App.js
接下来，在 App.js 中实现文件选择和上传逻辑。
// App.js
import React, { useState } from 'react';
import { Button, Text, View, ActivityIndicator, Alert } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import Worker from 'react-native-workers';
const App = () => {
const [uploadStatus, setUploadStatus] = useState('');
const [isLoading, setIsLoading] = useState(false);
// 使用 ImagePicker 选择图片
const pickImage = () => {
launchImageLibrary({ mediaType: 'photo' }, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
const fileUri = response.assets[0].uri;
handleUpload(fileUri);
}
});
};
// 处理文件上传
const handleUpload = async (fileUri) => {
setIsLoading(true);
setUploadStatus('Uploading...');
try {
// 启动 Worker
const worker = new Worker('./fileUploadWorker.js');
// 监听 Worker 的消息
worker.onmessage = (event) => {
if (event.data.success) {
setUploadStatus('File uploaded successfully!');
} else {
setUploadStatus('File upload failed.');
}
setIsLoading(false);
worker.terminate(); // 关闭 Worker
};
// 发送任务给 Worker
worker.postMessage({ action: 'uploadFile', fileUri });
} catch (error) {
console.error('Error in main thread:', error);
setUploadStatus('Error during upload.');
setIsLoading(false);
}
};
return (
{isLoading ? (
{uploadStatus}
)}
);
};
export default App;5. 配置 react-native-workers
由于 react-native-workers 是一个原生模块，你需要确保它正确配置到你的项目中。
对于 Android
在 android/app/build.gradle 中添加以下内容：
dependencies {
implementation project(':react-native-workers')
}然后在 android/settings.gradle 中添加：
include ':react-native-workers'
project(':react-native-workers').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-workers/android')最后，在 MainApplication.java 中注册模块：
import com.nuttawutmalee.RNWorkers.WorkersPackage; // 导入 WorkersPackage
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new WorkersPackage() // 注册 WorkersPackage
);
} 对于 iOS
在 ios/Podfile 中添加：
pod 'react-native-workers', :path => '../node_modules/react-native-workers'然后运行 pod install。
6. 运行项目
现在你可以运行项目了：
npx react-native run-android
# 或者
npx react-native run-ios7. 测试文件上传
- 启动应用后，点击 "Pick an Image" 按钮，选择一张图片。
- 图片选择后，应用会启动 Worker 并在后台线程中执行文件上传操作。
- 上传完成后，你会看到成功或失败的消息。
8. 注意事项
- 上传端点 ：请确保你有一个有效的上传服务器端点（例如 https://your-upload-endpoint.com/upload），并且该端点能够处理 multipart/form-data 格式的文件上传。
- 错误处理 ：在实际应用中，建议对网络请求进行更详细的错误处理，并提供用户友好的提示信息。
- 性能优化 ：如果你需要显示上传进度，可以在 fetch 请求中监听 progress 事件，并通过 Worker 将进度信息传递回主线程。
总结
通过这个案例，我们展示了如何在 React Native 中使用 react-native-workers 和 react-native-image-picker 实现文件上传功能。Worker 可以帮助我们在后台线程中执行耗时的操作，避免阻塞主线程，从而提升用户体验。