反应导航中的React-native android后退按钮

Well, I have a react-native app with multiple screen, each screen having a top bar where a back button is situated, it's main behavior is that the app returns to the main screen when this button is pressed. What I want to do is to copy this behavior to the hardware back button (now by pressing on hardware back button the app closes), how can I do this?

好吧，我有一个具有多个屏幕的本机应用程序，每个屏幕都有一个顶部栏，其中有一个后退按钮，它的主要行为是当按下此按钮时应用程序返回主屏幕。我想要做的是将此行为复制到硬件后退按钮（现在通过按下应用程序关闭的硬件后退按钮），我该怎么做？

UPDATE:

更新：

I'm using react-navigation and redux

我正在使用react-navigation和redux

4 个解决方案

#1

You can:

您可以：

import the BackHandler from "react-native"
从“react-native”导入BackHandler
Add in the componentWillMount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
添加componentWillMount BackHandler.addEventListener（'hardwareBackPress'，this.handleBackButton）;
Implement handleBackButton like this handleBackButton(){ this.props.navigation.popToTop(); return true; }
实现handleBackButton就像这个handleBackButton（）{this.props.navigation.popToTop（）;返回true; }

popToTop goes back to the first screen in the stack.

popToTop返回堆栈中的第一个屏幕。

If you are using react-navigation with Redux you should implement the popToTop as an action to dispatch.

如果您使用Redux的react-navigation，则应将popToTop实现为要调度的操作。

#2

So if you are using react-navigation and redux, you can take a look at docs - Handling the Hardware Back Button in Android

因此，如果您使用的是react-navigation和redux，您可以查看文档 - 在Android中处理硬件后退按钮

YourComponent.js:

YourComponent.js：

import React from "react";
import { BackHandler } from "react-native";
import { NavigationActions } from "react-navigation";

/* your other setup code here! this is not a runnable snippet */

class ReduxNavigation extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    /* more setup code here! this is not a runnable snippet */ 
    return <AppNavigator navigation={navigation} />;
  }
}

#3

You can do it by below example

您可以通过以下示例来完成

import { BackHandler } from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.backButtonClick = this.backButtonClick.bind(this);
  }

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backButtonClick);
  }

  componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this.backButtonClick);
  }

  backButtonClick(){
    if(this.props.navigation && this.props.navigation.goBack){
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }
}

#4

Import this package

导入此包

import { BackHandler } from "react-native";

从“react-native”导入{BackHandler};

Bind the function in the constructor

在构造函数中绑定函数

this.exitApp = this.exitApp.bind(this);

Your back button

你的后退按钮

<Button transparent onPress={this.exitApp}>
    <Icon name="arrow-back" />
</Button>

Handle back press and close the app

处理后退并关闭应用程序

exitApp() {
    BackHandler.exitApp()
}

// Add the listener when the page is ready
componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.exitApp);
}

// Remove the listener before removing
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.exitApp);
}

The way of displaying the button might be different but this will work! If any issue write in the comments.

显示按钮的方式可能有所不同，但这样可行！如果有任何问题写在评论中。

#1