Skip to main content

Android 프래그먼트와 통합

기존 앱과의 통합 가이드에서는 전체 화면 React Native 앱을 기존 Android 앱의 Activity로 통합하는 방법을 자세히 설명한다.

기존 앱의 프래그먼트 내부에서 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. 호스트 액티비티에 DefaultHardwareBackBtnHandler 구현하기​

호스트 액티비티가 ReactActivity가 아닌 경우, 뒤로 가기 버튼 이벤트를 처리하기 위해 DefaultHardwareBackBtnHandler 인터페이스를 구현해야 한다. React Native가 뒤로 가기 버튼 이벤트를 처리하려면 이 과정이 필수적이다.

호스트 액티비티로 이동하여 DefaultHardwareBackBtnHandler 인터페이스를 구현하는지 확인하자:

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 -> {
            // 버튼 클릭 처리
        });
    }

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

4. FrameLayout에 React Native Fragment 추가하기​

마지막으로, Activity를 업데이트하여 FrameLayout에 React Native Fragment를 추가한다. 이 예제에서는 Activity에 sample_button이라는 ID를 가진 버튼이 있다고 가정한다. 이 버튼을 클릭하면 FrameLayout에 React Native Fragment가 렌더링된다.

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에서 안드로이드 앱을 실행한다. 앱은 개발 서버에서 JavaScript/TypeScript 코드를 불러와 Activity의 React Native 프래그먼트에 표시해야 한다.

앱은 다음과 같이 보여야 한다:

스크린샷