react-navigation中的React-native android后退按钮答案

【问题标题】：React-native android back button in react-navigationreact-navigation中的React-native android后退按钮
【发布时间】：2018-06-08 12:54:38
【问题描述】：

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

更新：

我正在使用react-navigation 和redux

【问题讨论】：

您能说明一下您是如何添加 react-navigation 配置的吗？

标签： android react-native redux react-navigation

【解决方案1】：

你可以：

从“react-native”导入 BackHandler
在componentDidMount中添加（componentWillMount已弃用）BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
像这样实现handleBackButton handleBackButton(){ this.props.navigation.popToTop(); return true; }

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

如果你在 Redux 中使用 react-navigation，你应该实现 popToTop 作为一个动作来调度。

【讨论】：

componentWillMount 已弃用，将在以后的版本中删除，改用 componentDidMount
return true; 阻止后退按钮的默认行为。正是我需要的，谢谢！

【解决方案2】：

你可以通过下面的例子来做到这一点

import { BackHandler } from 'react-native';

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

  componentDidMount() {
    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;
  }
}

【讨论】：

【解决方案3】：

在功能组件中使用 react Hooks 实现：

useEffect(() => {
    function handleBackButton() {
      navigation.navigate('register-phone');
      return true;
    }

    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);

    return () => backHandler.remove();
  }, [navigation]);

不要忘记在卸载时移除监听器。

基于react-native documentation。

【讨论】：

【解决方案4】：

所以如果你使用react-navigation和redux，你可以看看docs - Handling the Hardware Back Button in Android

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} />;
  }
}

【讨论】：

【解决方案5】：

导入这个包

import { BackHandler } from "react-native";

在构造函数中绑定函数

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

您的后退按钮

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

处理后按并关闭应用程序

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);
}

显示按钮的方式可能会有所不同，但这会起作用！如果有任何问题写在 cmets 中。

【讨论】：