Skip to main content
Version: Next

안드로이드 프래그먼트와의 통합

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

기존 앱의 프래그먼트 내에서 React Native 컴포넌트를 사용하려면 몇 가지 추가 설정이 필요하다.

1. 기존 앱에 React Native 추가하기​

기존 앱과의 통합 가이드를 끝까지 따라가며 React Native 앱이 전체 화면 액티비티에서 안전하게 실행될 수 있도록 설정한다.

2. React Native Fragment를 위한 FrameLayout 추가하기​

이 예제에서는 FrameLayout을 사용해 Activity에 React Native Fragment를 추가한다. 이 방법은 유연하며, 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 인터페이스를 구현하도록 수정한다:

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. 프레임 레이아웃에 React Native 프래그먼트 추가하기​

마지막으로, Activity를 업데이트하여 프레임 레이아웃에 React Native 프래그먼트를 추가할 수 있다. 이 예제에서는 Activity에 sample_button이라는 ID를 가진 버튼이 있다고 가정한다. 이 버튼을 클릭하면 프레임 레이아웃에 React Native 프래그먼트가 렌더링된다.

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를 통해 이 프래그먼트를 FrameLayout에 추가한다.

빌더 내부에서 프래그먼트를 생성하는 방식을 커스터마이즈할 수 있다:

  • setComponentName은 렌더링하려는 컴포넌트의 이름이다. index.js 파일 내 registerComponent 메서드에 지정한 문자열과 동일하다.
  • setLaunchOptions는 컴포넌트에 초기 props를 전달하는 옵션 메서드다. 사용하지 않는다면 이 메서드를 제거해도 된다.

5. 통합 테스트 실행​

yarn start를 실행해 번들러를 작동시키고, Android Studio에서 안드로이드 앱을 실행한다. 앱은 개발 서버에서 JavaScript/TypeScript 코드를 불러와 Activity의 React Native Fragment에 표시해야 한다.

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

스크린샷