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

Android Fragmentとの統合

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

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

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

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

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

この例では、FrameLayoutを使用してReact Native FragmentをActivityに追加します。このアプローチは柔軟性があり、Bottom SheetsやTab Layoutsなどの他のレイアウトでReact Nativeを使用する場合にも応用できます。

まず、Activityのレイアウト（例：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. ホストActivityにDefaultHardwareBackBtnHandlerを実装させる​

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

ホストActivityに進み、DefaultHardwareBackBtnHandlerインターフェースを実装していることを確認してください。

非推奨 (Deprecated): 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. FrameLayoutにReact Native Fragmentを追加する​

最後に、Activityを更新してReact Native FragmentをFrameLayoutに追加します。この特定の例では、Activityにidがsample_buttonのボタンがあり、それをクリックするとReact Native FragmentがFrameLayoutにレンダリングされると仮定します。

Activityの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に追加します。

ビルダー内で、Fragmentの作成方法をカスタマイズできます。

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

5. 統合をテストする​

必ずyarn startを実行してバンドラを起動し、次にAndroid StudioでAndroidアプリを実行してください。アプリは開発サーバーからJavaScript/TypeScriptコードをロードし、Activity内のReact Native Fragmentに表示するはずです。

アプリは次のように表示されるはずです。

Screenshot