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

Android Fragmentとの統合

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

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

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

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

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

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

最初に、Activityのレイアウト（たとえば、res/layoutsフォルダー内のmain_activity.xml）に、id、幅、高さを持つ<FrameLayout>を追加します。これは、React Native Fragmentをレンダリングするレイアウトになります。

<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インターフェースを実装していることを確認します

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() {
+       super.onBackPressed();
+   }
}

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

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

次のようにActivityのonCreateメソッドを更新します

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コードをロードし、ActivityのReact Native Fragmentに表示する必要があります。

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

Screenshot