跳至主内容
版本：0.82

与 Android Fragment 集成

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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

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

1. 将 React Native 添加到应用​

请完整遵循与现有应用集成指南，确保您能在全屏 Activity 中安全运行 React Native 应用。

2. 为 React Native Fragment 添加 FrameLayout​

本示例将使用 FrameLayout 将 React Native Fragment 添加到 Activity。此方法具有足够灵活性，可适配 Bottom Sheets 或 Tab Layouts 等其他布局。

首先在 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 接口：

已弃用

自 API 33 起，Activity.onBackPressed() 已被弃用。针对 API 36 的应用在 Android 16 设备上将不再触发此方法，应改用 OnBackPressedDispatcher。

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. 将 React Native Fragment 添加到 FrameLayout​

最后，我们可以更新 Activity 以向 FrameLayout 添加 React Native Fragment。本示例假设您的 Activity 包含 ID 为 sample_button 的按钮，点击后将向 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 是向组件传递初始属性的可选方法，如不需要可移除

5. 测试集成效果​

请先运行 yarn start 启动打包程序，然后在 Android Studio 中运行 Android 应用。应用应从开发服务器加载 JavaScript/TypeScript 代码，并在 Activity 的 React Native Fragment 中显示。

应用效果应如下图所示：

截图