代码之家 › 专栏 › 技术社区 › Eugen-Andrei Coliban HARI PRASAD GANGI

React导航中的React Native Android后退按钮

react-navigation redux react-native android

Eugen-Andrei Coliban HARI PRASAD GANGI · 技术社区 · 6 年前

嗯,我有一个 react-native 有多个屏幕的应用程序,每个屏幕都有一个顶栏,其中有一个后退按钮,它的主要行为是,当这个按钮被按下时,应用程序返回到主屏幕。我想做的是将此行为复制到硬件后退按钮(现在按下硬件后退按钮应用程序关闭),我如何才能做到这一点?

更新:

我在用 react-navigation 和 redux

4 回复 | 直到 6 年前

Paolo Dell'Aguzzo 6 年前

你可以:

从“react native”导入backhandler
在组件中添加willmount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
像这样设置把手按钮 handleBackButton(){ this.props.navigation.popToTop(); return true; }

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

如果将react导航用于redux,则应将poptotop实现为要分派的操作。

MoKhajavi75 6 年前

所以如果你使用 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} />;
  }
}

Javascript Hupp Technologies 6 年前

你可以通过下面的例子来做

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

Rajendran Nadar 6 年前

导入此包

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

显示按钮的方式可能不同,但这将工作!如果有任何问题写在评论里。