web-dev-qa-db-ja.com

反応ネイティブAndroid反応ナビゲーションの戻るボタン

さて、私は複数の画面を持つreact-nativeアプリを持っています。各画面には、戻るボタンが配置されている上部バーがあります。主な動作は、このボタンを押すとアプリがメイン画面に戻ることです。私がしたいのは、この動作をハードウェアの戻るボタンにコピーすることです（今度はハードウェアの戻るボタンを押して、アプリが閉じます）、これを行うにはどうすればよいですか？

更新：

react-navigationとreduxを使用しています

androidreact-nativereduxreact-navigation
6
Eugen-Andrei Coliban

あなたはできる：

  1. 「react-native」からBackHandlerをインポートする
  2. ComponentWillMount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);に追加します
  3. このようにhandleBackButtonを実装するhandleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTopは、スタックの最初の画面に戻ります。

Reduxでreact-navigationを使用している場合は、ディスパッチするアクションとしてpopToTopを実装する必要があります。

7
Paolo Dell'Aguzzo

したがって、react-navigationとreduxについては、 docs-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} />;
  }
}
1
MohamadKh75

以下の例でそれを行うことができます

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;
  }
}
1
Javascript Hupp Technologies

このパッケージをインポート

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
Rajendran Nadar