React-родная кнопка возврата Android в реагирующей навигации - PullRequest
Новая
       25

React-родная кнопка возврата Android в реагирующей навигации

0 голосов
/ 08 июня 2018

Что ж, у меня есть приложение react-native с несколькими экранами, каждый экран имеет верхнюю панель, на которой расположена кнопка «назад», его основное поведение заключается в том, что приложение возвращается к главному экрану при нажатии этой кнопки.Что я хочу сделать, это скопировать это поведение на аппаратную кнопку возврата (теперь, нажав на кнопку аппаратного возврата, приложение закрывается), как я могу это сделать?

ОБНОВЛЕНИЕ:

Я использую react-navigation и redux

Ответы [ 4 ]

0 голосов
/ 08 июня 2018

Вы можете сделать это по примеру ниже 

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;
  }
}
0 голосов
/ 08 июня 2018

Вы можете:

  1. импортировать BackHandler из "act-native "
  2. Добавить в компонентWillMount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  3. Реализация handleBackButton, как этот handleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTop возвращается к первому экрану в стеке.

Если вы используете реагирующую навигацию с Redux, вы должны реализовать popToTop как действие для отправки.

0 голосов
/ 08 июня 2018

Импорт этого пакета

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

Способ отображения кнопки может быть другим, но это будет работать!Если есть какие-либо вопросы, напишите в комментариях.

0 голосов
/ 08 июня 2018

Так что, если вы используете react-navigation и redux, вы можете взглянуть на документы - Обработка аппаратной кнопки возврата в 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} />;
  }
}
...