はじめに

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

なぜこれを書いてるか

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

今回やりたかったこと

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

画面構成と簡単な説明

　　　　　↓ここではアプリを閉じたい
[Login]-[Home]-[遷移先A]-[遷移先B]
　　　　　　　　　↑　　　　　↑
　　　　　　　　　こいつらだと１個前に戻りたい

導入したバージョン

"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マンで行きます。
皆様のアドバイスお待ちしております。

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