与 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 的布局。
<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。
- Java
- Kotlin
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()
+ }
}
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
方法
- Java
- Kotlin
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()
}
}
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 中。
你的应用应该看起来像这样