跳到主要内容

与 Android 片段集成

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

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

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

按照与现有应用集成指南的说明操作,直到最后,以确保您可以安全地在全屏 Activity 中运行您的 React Native 应用。

2. 为 React Native Fragment 添加一个 FrameLayout

在此示例中,我们将使用 FrameLayout 将 React Native Fragment 添加到 Activity 中。这种方法足够灵活,可以调整为在其他布局(例如底部工作表或标签布局)中使用 React Native。

首先,将带有 id、宽度和高度的 <FrameLayout> 添加到您的 Activity 布局(例如 res/layouts 文件夹中的 main_activity.xml)中。这是您将找到以渲染 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

差异
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 以将 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.jsregisterComponent 方法中指定的字符串相同。
  • setLaunchOptions 是一个可选方法,用于将初始 props 传递给您的组件。这是可选的,如果您不使用它,可以将其删除。

5. 测试您的集成

确保运行 yarn start 来运行打包器,然后在 Android Studio 中运行您的 Android 应用。应用应从开发服务器加载 JavaScript/TypeScript 代码,并将其显示在 Activity 中的 React Native Fragment 中。

您的应用应如下所示

Screenshot