ReactNativeのAndroidで画面遷移を実装する

まずAndroidアプリの画面遷移の実装方法を理解してないと実装できないので、確認していく。

Androidアプリでの画面遷移の方法

• 複数のアクティビティを作っておき、インテントという機能を使うと遷移できる

そもそもアクティビティとは？

• ユーザーが実際に目にするアプリケーション画面のこと
• レイアウトが同じ場合はテキストや画像を書き換えて使用することができるが、レイアウトが大きく変わる時は別のアクティビティを用意してあげる必要がある

アクティビティクラス

• android/src/main/java/com.xxx/MainActivity にデフォルトのアクティビティクラスがある
• 内容は以下のようになっている

package com.xxx;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "xxx";
    }
}

github.com

• ReactNativeActivityクラスを確認すると、Androidのアクティビティ用のクラスを継承していることがわかる

• アクティビティクラスに画面起動や画面をタップした時(onClick)の処理などを書いていく

インテントとは

• 複数のアクティビティを遷移するための機能
• 以下のようにして、画面遷移を行うことができる

public void onClick(View v) {
  //遷移先のアクティビティへのインテントを作成
  Intent intent = new Intent(this, Activity.class);
  //遷移先の画面を起動
  startActivity(intent)
}

ReactNativeでJavaで書いたネイティブコードを扱えるようにする

• 単純に画面遷移するだけなら、Linking.openURL(xx)でも良いがAndroidの深い階層の設定画面を開きたい時はネイティブのコードを書くことが必要
• ネイティブのコードをJS側から扱えるようにする仕組みをReactNativeでは用意してくれているのでそれを今回使う

次の記事を参考にした。

qiita.com

通知設定を開きたい時はこんな感じのコードになった。

    @ReactMethod
    public void open(String type_setting) {
        Intent intent = new Intent();
        switch (type_setting) {
            case "ACTION_APP_NOTIFICATION_SETTINGS":
                intent.setAction("android.settings.APP_NOTIFICATION_SETTINGS");
                //どのアプリの通知設定を開くか判断するのに必要
                intent.putExtra("app_package", this.reactContext.getPackageName());
                intent.putExtra("app_uid", this.reactContext.getApplicationInfo().uid);
                break;
            default:
                break;
        }
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        this.reactContext.startActivity(intent);
    }