如何倾听儿童的组件活动在本地做出反应？

Question

我想实现我的阵营原生应用，我使用的是StackNavigator作为路由器从父母事件侦听器子组件。

我如何监听事件发生的前/父组件？

Answer 1

只需使用从母体成分反应原住民的DeviceEventEmitter.Emit您的活动象下面这样：

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

我在如何发出，听从父组件事件在子组件一直在研究本土作出反应，尝试不同的方法后，我想这可能是很好的分享我是如何得到它的工作。

在你的父组件（App.js在我的情况），导入EventEmitter lib目录下：

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

    });

  }

  ...

}

这就是我所做的子组件我的事件监听器，我希望它可以帮助别人。如果你有一个更好的实施，请分享/发表评论它。

Answer 3

最好的办法，而不是使用EventEmitter我目前的经验（7个月后，这个问题）使用终极版的状态保持器，您可以创建将传递消息通过组件父子，然后连接组件可用于获取变量变量（状态）的更改将立即它发生。

我决定使用Rematch是终极版的缩小版本，我已经得到了很好的效果。它迫使我删除我的所有EventEmitters和使用调​​度方法来更新变量（状态），将在连接部件进行更新。

Answer 4

具有事件发射器可跟踪时可能会有点凌乱该事件来自何处它被倾听。

就像你通过screenProps={this.eventEmitter}传递事件发射到孩子（这是你基本上是在做什么），为什么不通过你的孩子可以用它来启动其母公司行动的实际功能。这很可能是最有反应的方式来做事。

这可能不是理想的是添加一个额外的事件监听器，因为它会在某些时候影响性能。