跳至主要内容

与 Android Fragment 集成

有关 与现有应用集成 的指南详细介绍了如何将全屏 React Native 应用作为 Activity 集成到现有 Android 应用中。

要在现有应用中的 Fragment 内使用 React Native 组件，需要进行一些额外的设置。

1. 将 React Native 添加到您的应用​

请按照 与现有应用集成 的指南操作，直到最后，以确保您可以在全屏 Activity 中安全地运行 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 中。

在构建器内部，您可以自定义 Fragment 的创建方式

  • setComponentName 是您要呈现的组件的名称。它与您在 index.js 中 registerComponent 方法中指定的字符串相同。
  • setLaunchOptions 是一种可选方法，用于将初始 props 传递给您的组件。这是可选的，如果您不使用它，可以将其删除。

5. 测试您的集成​

确保您运行 yarn start 以运行捆绑器，然后在 Android Studio 中运行您的 Android 应用。该应用应从开发服务器加载 JavaScript/TypeScript 代码，并在 Activity 中的 React Native Fragment 中显示它。

您的应用应如下所示

Screenshot