在 React Native 开发过程中，我们经常需要在不同的组件之间传递信息或者事件。传统的方式是通过 props 或者回调函数来处理，但是当组件层级较深时这种方式就会变得非常繁琐和难以维护。同时，我们也需要一个更加高效灵活的方案来处理事件和状态的传递。
这时候，我们就可以使用 npm 包 @nfcampos/react-native-global-event-emitter 来帮助我们解决这个问题。该库可以让你轻松实现跨组件/页面的事件传递，而无需使用 Redux 或其它类似的状态管理库。
为什么要使用 @nfcampos/react-native-global-event-emitter？
在 React Native 开发中，可能会有这样一个场景：我们需要在两个不相关的组件中传递信息（例如，点击按钮需要在另一个页面打开某个弹窗）。这时候，如果直接使用 props 或者回调函数的方式，无论是代码逻辑还是管理方式都会变得非常困难。而使用 @nfcampos/react-native-global-event-emitter，可以帮助我们轻松地在不相关的组件之间传递事件或者信息。
如何使用 @nfcampos/react-native-global-event-emitter？
安装
通过 npm 安装 @nfcampos/react-native-global-event-emitter。
npm install --save @nfcampos/react-native-global-event-emitter
引用
在需要使用的组件中引入 @nfcampos/react-native-global-event-emitter。
import { EventEmitter } from "react-native";注册事件
在组件中调用 EventEmitter.addListener 方法来注册事件监听器，该方法有两个参数，参数一是事件名称，参数二是回调函数。
componentDidMount() {
this.eventEmitter = new EventEmitter();
this.eventEmitter.addListener("customEvent", () => {
console.warn("Custom Event Triggered");
});
}触发事件
在需要触发事件的组件中，通过 EventEmitter.emit 方法触发事件，该方法有两个参数，参数一是事件名称，参数二是需要传递的参数，可以是一个值或者一个对象。
this.eventEmitter.emit("customEvent");删除事件
在组件销毁时，使用 EventEmitter.removeListener 方法来删除事件监听器。
componentWillUnmount() {
this.eventEmitter.removeListener("customEvent");
}示例代码
现在，我们来看看一个更加具体的例子。假设我们有两个页面：MainPage 和 SecondPage，在 SecondPage 页面中弹出了一个模态框，我们需要在 MainPage 页面中监听模态框的打开和关闭事件，并执行相应的逻辑。
1. MainPage
在 MainPage 的 componentDidMount 中注册 showModal 和 hideModal 事件的监听器。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------------------------------
----- -------- ------- --------- -
------------------- -
----------------- - --- ---------------
---------------------- - ------------------------------------------ -- -- -
--------------- --------------- ---- ---
---
---------------------- - ------------------------------------------ -- -- -
--------------- --------------- ----- ---
---
-
---------------------- -
--------------------------------
--------------------------------
-
-------- -
------ -
----- -------------------------
---------- -----------
------- ----------- ------ ----------- -- --------------------------------------------- --
-------------------------- -- ------ ---
-------
--
-
-2. SecondPage
在 SecondPage 的 componentDidMount 中注册 closeModal 事件的监听器。在 showModal 方法中，发出 showModal 事件。在 closeModal 方法中，发出 hideModal 事件。
-- -------------------- ---- -------
----- ---------- ------- --------- -
------------------- -
----------------- - --- ---------------
----------------------- - ------------------------------------------- -- -- -
-------------------------------
---
-
---------------------- -
---------------------------------
-
----------- -
------------------------------------
-
------------ -
------------------------------------
-------------------------------------
-
-------- -
------ -
----- -------------------------
------------ -----------
------- ----------- ------ ----------- -- ----------------- --
------- ------------ ------ ----------- -- ------------------ --
-------
--
-
-3. Modal
在 Modal 组件中，我们可以直接读取 props，而不需要通过回调函数来传递参数。例如，在 Button 中，我们直接调用 this.props.onPress 方法，而不需要在 handlePress 函数中再次触发事件。
-- -------------------- ---- -------
----- ----- ------- --------- -
-------- -
------ -
----- ---------------------
------------------
------- ------------ ------ --------------------------------- --
-------
--
-
-总结
通过使用 @nfcampos/react-native-global-event-emitter，我们可以轻松处理跨组件的事件传递，提高代码的可读性和可维护性。同时，在 Redux 等状态管理库使用上，也可以更加高效地进行状态管理。在使用 @nfcampos/react-native-global-event-emitter 时，我们需要注意事件监听器的添加和删除，以及事件名称的命名和使用，以保证代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea481e8991b448dc084