Question

我正在使用Wix的react-native-navigation库。我试图在按下导航栏的后退按钮或使用滑动将其移回到上一个屏幕时断开套接字连接。不是在Android上按下硬件后退按钮。

我一直关注Wix文档，以处理位于顶部的https://wix.github.io/react-native-navigation/#/docs/topBar-buttons?id=handling-button-press-events

export default class Lobby extends React.Component {
  static options(passProps) {
    return {
      topBar: {
        leftButtons: {
          id: "backButton"
        }
      }
    };
  }

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      queue: []
    };
    Navigation.events().bindComponent(this);
  }
// as a parameter ive tried: {backButton}, "backButton", {buttonId}, and backButton
  navigationButtonPressed(backButton) {
    const socket = io("http://172.31.99.250:3000");
    socket.emit("leaveLobby", this.state.username);
  }

...
}

Answer 1

首先，请确保单击按钮确实有效。对您的代码进行相同的更正：

在您的新按钮中添加一些图标图像，以使您真正有一点要单击（在脚本所在的文件夹中插入一些icon.png图像）：
```
topBar: {
  leftButtons: {
    id: "backButton",
    icon: require('icon.png') // <-- icon.png image
  }
}
```

然后在您的按钮操作中添加简单的警报，例如：

navigationButtonPressed({ buttonId }) {
  //const socket = io("http://172.31.99.250:3000");
  //socket.emit("leaveLobby", this.state.username);

  alert("Button tapped: " + buttonId) // <- In the alert box on your app you will see your button id, here "backButton"
}

如果在应用上看到警报，但套接字未断开连接，则应在socket.io实现上进行更多调试。例如，在这里我认为您正在创建新的套接字，而不是断开已经存在的套接字。我认为您应该从创建脚本的其他脚本中导入const socket。

如何对React-native-navigation导航栏后退按钮（而非硬件按钮）进行编程？

1 个答案: