メインコンテンツへスキップ

Android Fragmentとの統合

既存のアプリとの統合のガイドでは、フルスクリーンの React Native アプリを既存の Android アプリにアクティビティとして統合する方法を詳しく説明しています。

既存のアプリでフラグメント内に React Native コンポーネントを使用するには、いくつかの追加設定が必要です。

1. アプリに React Native を追加する​

既存のアプリとの統合のガイドを最後まで実行し、フルスクリーンアクティビティで React Native アプリが安全に実行できることを確認してください。

2. React Native Fragment 用の FrameLayout を追加する​

この例では、FrameLayout を使用して React Native Fragment をアクティビティに追加します。このアプローチは十分に柔軟であり、ボトムシートやタブレイアウトなどの他のレイアウトで React Native を使用するように適応させることができます。

まず、アクティビティのレイアウト（例：res/layouts フォルダー内の main_activity.xml）に、ID、幅、高さを持つ <FrameLayout> を追加します。これが、React Native Fragment をレンダリングするために見つけるレイアウトです。

xml
<FrameLayout
    android:id="@+id/react_native_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. ホストアクティビティに DefaultHardwareBackBtnHandler を実装させる​

ホストアクティビティが ReactActivity ではないため、戻るボタンの押下イベントを処理するために DefaultHardwareBackBtnHandler インターフェースを実装する必要があります。これは React Native が戻るボタンの押下イベントを処理するために必要です。

ホストアクティビティに移動し、DefaultHardwareBackBtnHandler インターフェースを実装していることを確認してください。

非推奨

Activity.onBackPressed() は API レベル 33 以降非推奨になりました。API レベル 36 をターゲットとする Android 16 デバイスでは、これは呼び出されなくなり、代わりにOnBackPressedDispatcher を使用する必要があります。

diff
package <your-package-here>;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

-class MainActivity extends AppCompatActivity {
+class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        findViewById(R.id.button_appcompose).setOnClickListener(button -> {
            // Handle button click
        });
    }

+   @Override
+   public void invokeDefaultOnBackPressed() {
+       getOnBackPressedDispatcher().onBackPressed();
+   }
}

4. React Native Fragment を FrameLayout に追加する​

最後に、アクティビティを更新して、React Native Fragment を FrameLayout に追加できます。この特定の例では、アクティビティに ID sample_button を持つボタンがあり、クリックすると React Native Fragment が FrameLayout にレンダリングされると仮定します。

アクティビティの onCreate メソッドを次のように更新します。

diff
package <your-package-here>;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
+import com.facebook.react.ReactFragment;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        findViewById(R.id.button_appcompose).setOnClickListener(button -> {
+           Bundle launchOptions = new Bundle();
+           launchOptions.putString("message", "my value");
+
+           ReactFragment fragment = new ReactFragment.Builder()
+                   .setComponentName("HelloWorld")
+                   .setLaunchOptions(launchOptions)
+                   .build();
+           getSupportFragmentManager()
+                   .beginTransaction()
+                   .add(R.id.react_native_fragment, fragment)
+                   .commit();
        });
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

上記のコードを見てみましょう。

ReactFragment.Builder() は新しい ReactFragment を作成するために使用され、その後 supportFragmentManager を使用してその Fragment を FrameLayout に追加します。

ビルダー内で、フラグメントの作成方法をカスタマイズできます。

  • setComponentName は、レンダリングしたいコンポーネントの名前です。これは、registerComponent メソッド内の index.js で指定された文字列と同じです。
  • setLaunchOptions は、コンポーネントに初期プロパティを渡すためのオプションのメソッドです。これはオプションであり、使用しない場合は削除できます。

5. 統合をテストする​

yarn start を実行してバンドラーを起動し、Android Studio で Android アプリを実行していることを確認してください。アプリは開発サーバーから JavaScript/TypeScript コードをロードし、アクティビティの React Native Fragment に表示するはずです。

アプリは次のようになります。

Screenshot