推荐使用:React Native Event Listeners - 跨组件通信的高效解决方案
import React, { useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';
// 假设有一个名为MyNativeModule的原生模块
const MyNativeModule = NativeModules.MyNativeModule;
// 创建一个事件监听器
const eventEmitter = new NativeEventEmitter(MyNativeModule);
export default function MyComponent() {
useEffect(() => {
// 监听事件
const subscription = eventEmitter.addListener(
'someEvent', // 事件名称
(data) => {
// 处理事件
console.log('Received data from native module:', data);
}
);
// 清理函数,移除监听器
return () => {
subscription.remove();
};
}, []); // 空数组保证只在组件挂载时添加监听器一次
// 组件的其余部分...
}
这段代码演示了如何在React Native组件中使用useEffect
和NativeEventEmitter
来监听来自原生模块的事件。在组件挂载时添加监听器,并在卸载时移除监听器,以防止内存泄漏。
评论已关闭