如何编写 TopBar 按钮按下事件处理程序？答案

【问题标题】：How to program TopBar button press event handler?如何编写 TopBar 按钮按下事件处理程序？
【发布时间】：2019-06-25 19:38:54
【问题描述】：

我正在使用 Wix 的 react-native-navigation。

他们的文档说组件可以使用Navigation.events().bindComponent(this); 和navigationButtonPressed({ buttonId }) { // will be called when "buttonOne" is clicked } 来监听顶部按钮事件

但是什么都没有发生。甚至不是最初的流行音乐活动。

export default class Lobby extends React.Component {
  static options(passProps) {
    topBar: {
      title: {
        text: "Lobby"
      },
      visible: true,
      leftButtons: [
        {
          id: "testId",
          text: "Leave",
          color:"red"
        }
      ]
    }
  }
  constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
  }
  navigationButtonPressed({ buttonId }) {
    switch(buttonId) {
      case: "testId":
        alert("test");
        socket.emit("disconnect");
        break;
    }
  }

Navigation 导入成功。

我至少希望服务器接收到套接字事件，我还希望页面被弹出并导航到上一页。

警报显示，但根本没有收到任何服务器事件。

【问题讨论】：

这是使用“断开连接”事件的问题。更改事件名称有效。我相信这是因为“断开连接”是 socket.io 服务器的保留关键字。

标签： react-native react-native-navigation

【解决方案1】：

我有相同的拦截器，这就是我修复它的方法。我使用了 registerNavigationButtonPressedListener() 并通过了 navigationButtonPressed

`constructor(props) {
    super(props);
    Navigation.events().registerNavigationButtonPressedListener(this.navigationButtonPressed);
  }
  navigationButtonPressed({ buttonId }) {
    switch(buttonId) {
      case: "testId":
        alert("test");
        socket.emit("disconnect");
        break;
    }`

【讨论】：