与 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 的布局。
<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。
- 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
是一个可选方法,用于将初始 props 传递给您的组件。这是可选的,如果您不使用它,可以将其删除。
5. 测试您的集成
确保运行 yarn start
来运行打包器,然后在 Android Studio 中运行您的 Android 应用。应用应从开发服务器加载 JavaScript/TypeScript 代码,并将其显示在 Activity 中的 React Native Fragment 中。
您的应用应如下所示