2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React NavigationとAndroidのハードウェアバックボタン制御について

Last updated at Posted at 2018-07-18

#はじめに
最近react nativeをさわり始めた人です。
元はiOS向けのアプリを作ってた人ですが、諸事情で現在react nativeでAndroid向けアプリを作成中です。

##なぜこれを書いてるか
本題に入る前にどうしてもここまで書いておきたかった。
React Native界隈ドキュメントが不親切オブ不親切+そもそも何が正解かわからないこと多過ぎ問題。
想定通りの動きをしていたとしても、それが正解なのかよくわからない!
ということで、やりたいこと、やってみたことを記載し、間違ってたら誰かがマサカリを投げてくれるだろうスタイルをとろうと思った次第。

#今回やりたかったこと

  • React Navigationを利用した画面遷移
  • Home画面ではバックボタンでアプリを閉じる
  • 遷移先での画面ではバックボタンで1個前に戻る

##画面構成と簡単な説明
     ↓ここではアプリを閉じたい
[Login]-[Home]-[遷移先A]-[遷移先B]
         ↑     ↑
         こいつらだと1個前に戻りたい

##導入したバージョン

  • "react": "16.3.1"
  • "react-native": "0.55.4"
  • "react-navigation": "2.6.2"

##なぜReact Navigationか
React NativeでAndroid向けアプリ作ってますが、正直React Navigationでやりたかったことは満たせそうだったので、こちらを選択。
(React Native Navigationを使ってる例があまり見当たらない+OS側のソースもいじるのめんどくさいなぁという理由もある)

##実装したコード
React Navigationの実装部分は省いています。

HomeScreen.js
import { BackHandler, View, Text } from "react-native";

export default class HomeScreen extends Component {
 /**
   * ハードウェアの戻るボタン押下時処理
   */
  handleBackPress = () => {
    // HomeScreenの場合はハードウェアの戻るボタンでアプリを閉じる.
    // それ以外の場合は通常通りの動きをする。
    if (this.props.navigation.isFocused()) {
      BackHandler.exitApp();
    } else {
      this.props.navigation.goBack(null);
    }
    return true;
  };

  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
  }

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

  // ここは適当に書いたので動かなかったら直してください
  render() {
    return (
      <View style={style.container}>
        <Text onPress={{this.props.navigation.navigate("A")}>
          遷移先A
        </Text>
      </View>
    );
  }
}

##May be 説明
HomeScreenで動いてるからisFocused()の判定がHomeScreenを表示しているとtrueに、それ以外だとfalseになるのかなといった動きをしているので、現状こんな感じで実装。(今後のテスト次第では変えるかも)
正直これ使えとか言われそうな感はある。
https://reactnavigation.org/docs/en/screen-tracking.html
でも、たかがこんなことの為に・・・と思ったらこれでいい気がしてきたので。

#最後に
個人的には魔境オブ魔境すぎてNativeアプリ開発者がReact Nativeなんか使うもんじゃ無いなと思ってますが、宗教上の理由でAndroidやりたくないマンなのでしばらくはReact Nativeマンで行きます。
皆様のアドバイスお待ちしております。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?