Integracja z fragmentem Androida

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Przewodnik Integracja z istniejącymi aplikacjami szczegółowo opisuje, jak zintegrować pełnoekranową aplikację React Native z istniejącą aplikacją na Androida jako Activity.

Użycie komponentów React Native w ramach Fragmentów w istniejącej aplikacji wymaga dodatkowej konfiguracji.

1. Dodaj React Native do swojej aplikacji

Postępuj zgodnie z przewodnikiem Integracja z istniejącymi aplikacjami do końca, aby upewnić się, że możesz bezpiecznie uruchomić swoją aplikację React Native w pełnoekranowym Activity.

2. Dodaj FrameLayout dla fragmentu React Native

W tym przykładzie użyjemy FrameLayout, aby dodać fragment React Native do Activity. To podejście jest wystarczająco elastyczne i może zostać zaadaptowane do innych układów, takich jak Bottom Sheets lub Tab Layouts.

Najpierw dodaj <FrameLayout> z identyfikatorem, szerokością i wysokością do układu swojego Activity (np. main_activity.xml w folderze res/layouts). To miejsce będzie służyło do renderowania fragmentu React Native.

xml

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

3. Spraw, aby hostujące Activity implementowało DefaultHardwareBackBtnHandler

Ponieważ hostujące Activity nie jest ReactActivity, musisz zaimplementować interfejs DefaultHardwareBackBtnHandler do obsługi zdarzeń przycisku wstecz. Jest to wymagane przez React Native do obsługi tych zdarzeń.

Przejdź do hostującego Activity i upewnij się, że implementuje interfejs DefaultHardwareBackBtnHandler:

Przestarzałe

Activity.onBackPressed() zostało oznaczone jako przestarzałe od poziomu API 33. W przypadku urządzeń z Androidem 16 i aplikacji przeznaczonych dla poziomu API 36 nie będzie już wywoływana. Zamiast tego należy użyć OnBackPressedDispatcher.

Java

diff

package <your-package-here>

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

+class MainActivity : AppCompatActivity() {
+class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        findViewById<Button>(R.id.sample_button).setOnClickListener {
            // Handle button click
        }
    }

+   override fun invokeDefaultOnBackPressed() {
+       onBackPressedDispatcher.onBackPressed()
+   }
}

Kotlin

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. Dodaj fragment React Native do FrameLayout

Na koniec możemy zaktualizować Activity, aby dodać fragment React Native do FrameLayout. W tym przykładzie zakładamy, że Activity ma przycisk o identyfikatorze sample_button, którego kliknięcie spowoduje wyrenderowanie fragmentu React Native w FrameLayout.

Zaktualizuj metodę onCreate swojego Activity w następujący sposób:

Java

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 : AppCompatActivity(), DefaultHardwareBackBtnHandler {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        findViewById<Button>(R.id.sample_button).setOnClickListener {
+           val reactNativeFragment = ReactFragment.Builder()
+               .setComponentName("HelloWorld")
+               .setLaunchOptions(Bundle().apply { putString("message", "my value") })
+               .build()
+           supportFragmentManager
+               .beginTransaction()
+               .add(R.id.react_native_fragment, reactNativeFragment)
+               .commit()
        }
    }

   override fun invokeDefaultOnBackPressed() {
       super.onBackPressed()
   }
}

Kotlin

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();
    }
}

Przeanalizujmy powyższy kod.

ReactFragment.Builder() służy do utworzenia nowego ReactFragment, a następnie używamy supportFragmentManager, aby dodać ten Fragment do FrameLayout.

Wewnątrz buildera możesz dostosować sposób tworzenia fragmentu:

• setComponentName to nazwa komponentu, który chcesz wyrenderować. To ten sam ciąg określony w metodzie registerComponent w pliku index.js.

• setLaunchOptions to opcjonalna metoda przekazywania początkowych właściwości (props) do komponentu. Możesz ją usunąć, jeśli nie jest potrzebna.

5. Przetestuj integrację

Uruchom yarn start, aby uruchomić bundler, a następnie uruchom aplikację na Androida w Android Studio. Aplikacja powinna załadować kod JavaScript/TypeScript z serwera deweloperskiego i wyświetlić go w fragmencie React Native w Activity.

Twoja aplikacja powinna wyglądać następująco: