Question

一旦按下导航栏后退按钮，尝试以编程方式从socket.io连接断开。

我已尝试根据此处的Wix GitHub文档处理按钮按下操作：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);
  }
// for the parameter I've tried: `{buttonId}`, `{backButton}`,`"backButton"`, `backButton`
      navigationButtonPressed(backButton) {
        const socket = io("http://172.31.99.250:3000");
         socket.emit("leaveLobby", this.state.username);
      }

处理程序功能没有任何反应。该应用程序仅返回上一页而不发送socket.io事件

Answer 1

只需在

中使用

react-native-navigation v2

   import {BackHandler} from 'react-native'

   ...


    constructor(props){
        super(props)
        Navigation.events().bindComponent(this)
    }

    componentDidDisappear() {
        BackHandler.removeEventListener('hardwareBackPress',this.handleBackPress);
    }

    componentDidAppear() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }

    handleBackPress = () => {
        this.moveToHome()
        return true
    }

    moveToHome = () => {
        Navigation.mergeOptions("maintabs", {
            bottomTabs: {
                  currentTabIndex: 0,
            }
      })
    }
...

Answer 2

您必须按照以下方法使用此方法来运行函数

navigationButtonPressed({ buttonId }) {

let isRTL = this.checklanguage();

switch (buttonId) {
  case 'menuBtn':     // id of your navigation item
    this.toggleSideMenu(isRTL);    // func to run  
    break;
  case 'logoutBtn':
    this.logoutHandler();
    break;

  default:
    break;
}

}

您的代码在处理对象时存在错误，而您未在代码中提供

// for the parameter I've tried: `{buttonId}`, `{backButton}`,`"backButton"`, `backButton`
  navigationButtonPressed(backButton) {
    const socket = io("http://172.31.99.250:3000");
     socket.emit("leaveLobby", this.state.username);
  }

尝试我的一个

如何在react-native-navigation中对导航栏后退按钮进行编程？

2 个答案: