如何在React Native中侦听子组件中的事件？

Question

我想在我的React Native应用程序中实现从父项到子组件的事件监听器,我使用StackNavigator作为路由器.

如何监听顶部/父组件中发生的事件？

Answer 1

只需使用React Native's.DeviceEventEmitter从父组件中发送您的事件,如下所示:

DeviceEventEmitter.emit('eventKey', {name:'John', age:23});

并在儿童组件中听取事件

componentDidMount(){
      //add listener
      this.eventListener = DeviceEventEmitter.addListener('eventKey',this.handleEvent);
}

handleEvent=(event)=>{
 //Do something with event object
}

componentWillUnmount(){
      //remove listener
      this.eventListener.remove();
}

Answer 2

我一直在研究如何在 React Native 中从父组件向子组件发出和监听事件，在尝试了不同的方法之后，我认为分享我是如何让它工作的可能会很好。

在您的父组件（在我的例子中为 App.js）中，导入 EventEmitter 库：

import EventEmitter from 'EventEmitter';

创建事件发射器的变量实例：

export default class App extends Component {

...

  componentWillMount() {
    this.eventEmitter = new EventEmitter();
  }

...

}

然后，当发生某些事情时发出事件：

this.eventEmitter.emit('Event-Name', {args});

由于我使用 StackNavigator作为路由器，我必须将eventEmitter变量传递给子视图：

const routes = {
  ChildView1: {
    screen: ChildComponent1
  },
  ChildView2: {
    screen: ChildComponent2
  },
  ...
};

const AppNavigator = StackNavigator(
  {
    ...routes,
  },
  {
    initialRouteName: 'ChildView1',
    headerMode: 'none',
  /*
   * Use modal on iOS because the card mode comes from the right,
   * which conflicts with the drawer example gesture
   */
    mode: Platform.OS === 'ios' ? 'modal' : 'card',
  }
);

/* Here is the magic for the children views */

render(){
  return (
    <AppNavigator screenProps={this.eventEmitter} />
  );
}

好的，现在我们已经为子视图提供了事件监听器，让我们在我们的子组件之一中进行调用：

export default class ChildComponent1 extends Component {

  ComponentWillMount(){

    this.eventEmitter = this.props.screenProps;

    this.eventEmitter.addListener('Event-Name', ()=>{

      // Do something

    });

  }

  ...

}

这就是我为子组件完成事件侦听器的方法，我希望它对其他人有帮助。如果您有更好的实现请分享/评论。