Expo开发的3D查看器如何集成到现有Java Android项目中？

前置准备 #

• 确认Expo开发的3D查看器功能已调试完毕，支持接收外部传入的3D模型路径/ID参数
• 现有原生Android项目minSdkVersion≥21，符合Expo运行的最低版本要求

步骤1：导出Expo模块的原生依赖 #

• 在Expo项目根目录执行npx expo prebuild -p android，生成可独立编译的Android原生工程结构
• 调整Expo Android工程的入口配置，将3D查看器页面设置为JS bundle的默认启动入口，避免额外路由跳转
• 在Expo生成的Android工程根目录执行./gradlew assembleRelease，打包出独立AAR文件，也可直接将该Expo Android工程作为子模块导入原生项目

步骤2：原生项目依赖配置 #

• 若导入AAR文件，将AAR放入原生项目主模块的libs目录，在模块级build.gradle中添加依赖：

  implementation files('libs/expo-3d-viewer.aar')
  

• 若导入子模块，在项目settings.gradle中引入子模块：

  include ':expo-3d-viewer'
  project(':expo-3d-viewer').projectDir = new File('你的本地Expo Android工程路径')
  

  再在主模块build.gradle中添加依赖：

  implementation project(':expo-3d-viewer')
  

• 同步Gradle依赖后，在AndroidManifest.xml中添加必要权限，包括网络权限（加载云端模型）、存储读写权限（加载本地模型）

步骤3：实现承载Expo视图的目标Activity #

• 新建你需要承载3D查看器的Activity，例如命名为Model3DViewerActivity，继承AppCompatActivity
• 在Activity对应的布局文件中添加视图容器：

  <FrameLayout
      android:id="@+id/expo_view_container"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
  

• 在Activity的onCreate方法中初始化Expo实例并挂载视图，示例代码：

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_model_3d_viewer);
      
      // 接收原生侧传递的参数，例如模型本地路径
      Bundle modelParams = new Bundle();
      modelParams.putString("model_path", getIntent().getStringExtra("MODEL_PATH"));
      
      // 初始化Expo宿主
      ExpoHost expoHost = ExpoHostFactory.create(
          this,
          new ExpoHostOptions.Builder()
              .setPackages(Arrays.asList(
                  new MainReactPackage(),
                  // 补充3D查看器用到的所有原生模块包
                  new ThreeDViewerPackage()
              ))
              .build()
      );
      
      // 加载JS bundle并挂载到容器
      ReactRootView reactRootView = expoHost.createReactRootView(this);
      reactRootView.startReactApplication(
          expoHost.getReactInstanceManager(),
          "Expo3DViewer", // 替换为你的Expo模块注册名称
          modelParams
      );
      
      FrameLayout container = findViewById(R.id.expo_view_container);
      container.addView(reactRootView);
  }
  

• 重写onBackPressed方法，优先处理Expo侧的回退逻辑，无回退栈时再关闭Activity：

  @Override
  public void onBackPressed() {
      ExpoHost host = ExpoHostFactory.getHostInstance();
      if (host != null && host.getReactInstanceManager().onBackPressed()) {
          return;
      }
      super.onBackPressed();
  }
  

步骤4：双向交互适配 #

• 若需要Expo侧操作回调原生逻辑（例如关闭查看器、同步模型修改结果），可自定义原生模块暴露接口给JS侧调用，实现跨端通信
• 若存在架构适配需求，在build.gradle的ndk.abiFilters中配置对应架构，确保Expo用到的.so库和原生项目架构一致

步骤5：测试与打包 #

• 先打Debug包验证功能：测试模型加载、手势交互、页面跳转、参数传递是否正常，排查资源冲突问题
• 打Release包时，在混淆规则文件中添加Expo、React Native对应的混淆规则，避免运行时类找不到崩溃

内容的提问来源于stack exchange，提问作者toto_tata