跳到主要内容

与 Android 片段集成

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

要在现有应用的 **Fragments** 中使用 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 的布局。

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 接口

已废弃。 Activity.onBackPressed() 已在 API 级别 33 中废弃。Android 16 设备上的应用如果目标 API 级别为 36,则将不再调用此方法,应改用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 是一个可选方法,用于将初始属性传递给你的组件。这是可选的,如果你不使用它,可以将其删除。

5. 测试你的集成

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

你的应用应该看起来像这样

Screenshot