第57章 React Native 集成 Android Fragment 教程

版本：0.77 与 Android Fragment 集成 《集成到现有应用》指南介绍了如何把一个全屏的 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、宽度和高度的 。渲染 React Native Fragment 时就是找到这个布局。 XML 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 接口： JavaKotlinDiffpackage

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(R.id.sample_button).setOnClickListener {
// Handle button click
}
}

+ override fun invokeDefaultOnBackPressed() {
+ super.onBackPressed()
+ }
}
Diffpackage ;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

-class MainActivity extends AppCompatActivity {
4. 在 FrameLayout 中添加 React Native Fragment 最后，我们更新 Activity，把 React Native Fragment 添加到 FrameLayout 中。 在这个示例中，我们假设你的 Activity 里有一个 id 为 sample_button 的按钮，点击后会在 FrameLayout 中渲染一个 React Native Fragment。 按如下方式修改 Activity 的 onCreate 方法： JavaKotlinDiffpackage

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(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()
}
}
Diffpackage ;

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 中。 在 builder 里你可以自定义 Fragment 的创建方式： setComponentName 是要渲染的组件名称，也就是 index.js 中 registerComponent 方法里指定的那个字符串。 setLaunchOptions 是一个可选方法，用于向组件传递初始 props。如果用不到可以直接删掉。 5. 测试集成效果​ 确保先运行 yarn start 启动打包器（bundler），然后在 Android Studio 中运行 Android 应用。应用会从开发服务器加载 JavaScript/TypeScript 代码，并将其显示在 Activity 中的 React Native Fragment 里。 你的应用效果应该像下面这样：