react-native-image-picker NativeEventEmitter使用：监听原生模块事件
项目地址: https://gitcode.com/gh_mirrors/reac/react-native-image-picker 引言：为什么需要事件监听？
在React Native开发中，与原生模块交互时，除了主动调用方法外，有时还需要监听原生模块发送的事件。例如，当使用react-native-image-picker选择图片或拍摄照片时，可能需要实时获取选择进度、权限状态变化等信息。这时候，NativeEventEmitter就派上用场了。
NativeEventEmitter简介
NativeEventEmitter是React Native提供的一个类，用于监听原生模块发送的事件。它允许JavaScript代码订阅原生模块发出的事件，并在事件发生时执行相应的回调函数。
react-native-image-picker中的事件监听
1. 检查原生模块是否支持事件
首先，我们需要确认react-native-image-picker的原生模块是否支持事件发送。通过查看项目源码，我们发现：
在src/platforms/native.ts中，定义了与原生模块交互的方法：
const nativeImagePicker = isTurboModuleEnabled ?
require("./NativeImagePicker").default :
NativeModules.ImagePicker;
而在src/platforms/NativeImagePicker.ts中，定义了TurboModule接口：
export interface Spec extends TurboModule {
launchCamera(options: Object, callback: () => void): void;
launchImageLibrary(options: Object, callback: () => void): void;
}
从上述代码可以看出，当前版本的react-native-image-picker原生模块主要提供了launchCamera和launchImageLibrary两个方法，并没有直接暴露事件发送的接口。
2. 如何实现事件监听
虽然原生模块没有直接提供事件，但是我们可以通过以下步骤实现事件监听功能：
步骤一：创建NativeEventEmitter实例
import { NativeEventEmitter, NativeModules } from 'react-native';
const imagePickerEmitter = new NativeEventEmitter(NativeModules.ImagePicker);
步骤二：订阅事件
const subscription = imagePickerEmitter.addListener('ImagePickerEvent', (event) => {
console.log('Received event:', event);
// 处理事件数据
});
步骤三：取消订阅
// 在组件卸载时取消订阅，避免内存泄漏
subscription.remove();
3. 扩展原生模块支持事件（高级）
如果需要原生模块主动发送事件，需要修改原生代码：
Android端
在android/src/main/java/com/imagepicker/ImagePickerModuleImpl.java中添加事件发送逻辑：
// 发送事件
getReactApplicationContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("ImagePickerEvent", eventData);
iOS端
在ios/ImagePickerManager.mm中添加事件发送逻辑：
// 发送事件
[self.bridge.eventDispatcher sendDeviceEventWithName:@"ImagePickerEvent" body:eventData];
示例：监听图片选择进度
以下是一个完整的示例，展示如何监听图片选择的进度：
import React, { useEffect } from 'react';
import { NativeEventEmitter, NativeModules, View, Text } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
const ImagePickerExample = () => {
useEffect(() => {
const imagePickerEmitter = new NativeEventEmitter(NativeModules.ImagePicker);
const progressSubscription = imagePickerEmitter.addListener('ImagePickerProgress', (event) => {
console.log('Selection progress:', event.progress);
});
const errorSubscription = imagePickerEmitter.addListener('ImagePickerError', (error) => {
console.log('Error:', error.message);
});
return () => {
progressSubscription.remove();
errorSubscription.remove();
};
}, []);
const handleSelectImage = () => {
launchImageLibrary({}, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
console.log('Selected image:', response.uri);
}
});
};
return (
<View>
<Text onPress={handleSelectImage}>Select Image</Text>
</View>
);
};
export default ImagePickerExample;
注意事项
-
事件名称一致性：确保JavaScript中监听的事件名称与原生模块发送的事件名称一致。
-
内存管理：记得在组件卸载时取消事件订阅，避免内存泄漏。
-
错误处理：除了业务事件外，建议同时监听错误事件，以便及时处理异常情况。
-
兼容性：如果需要支持TurboModule，确保事件发送逻辑在新旧架构下都能正常工作。
总结
虽然react-native-image-picker目前的主要交互方式是通过回调函数，但通过NativeEventEmitter，我们可以扩展其功能，实现更灵活的事件监听。这对于构建响应式强、用户体验好的应用非常有帮助。
希望本文能帮助你更好地理解和使用NativeEventEmitter来监听react-native-image-picker的原生模块事件。如果你有任何问题或建议，欢迎在评论区留言。
参考资料
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
