How to run React native code in xamarin android using index.android.bundle?

Question

我想在 xamarin android 中运行 react native 项目。我已经经历了以下。他们使用 React native bridge 连接 React native 和 Xamarin。

https://github.com/voydz/xamarin-react-native

以下是我的package.json代码

{
  "name": "xamarin-react-native",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "npx bundle-sample-android && npx bundle-sample-forms-android",
    "bundle-sample-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Droid/Assets/index.android.bundle --assets-dest ../samples/SampleApp.Droid/Resources/",
    "bundle-sample-forms-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Forms.Droid/Assets/index.android.bundle --assets-dest ../samples/SampleApp.Forms.Droid/Resources/",
    "bundle-ios": "yarn bundle-sample-ios && yarn bundle-sample-forms-ios",
    "bundle-sample-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ../samples/SampleApp.iOS/Resources/main.jsbundle --assets-dest ../samples/SampleApp.iOS/Resources/",
    "bundle-sample-forms-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Forms.iOS/Resources/main.jsbundle --assets-dest ../samples/SampleApp.Forms.iOS/Resources/"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "^0.71.4"
  }
}

当我运行以下命令时

npm install
npm start
npm bundle-sample-android

我的 index.android.bundle 文件正在示例项目中更新，这正是我想要的。但是只有一个小问题。 Jars 文件夹中已经存在一个文件名 react-native-0.55.3.aar。我需要用 react-native-0.71.4.aar 替换它。这个 react-native-0.55.3.aar 文件给我错误

Error occured while reading the file '..\node_modules\react-native\android\com\facebook\react\react-native\0.55.3\react-native-0.55.3.aar'.

我不知道如何解决这个问题。有什么建议吗？

Answer 1

Xamarin 构建文件直接查找该文件。更新这个：

<LibraryProjectZip Include="..\node_modules\react-native\android\com\facebook\react\react-native\0.55.3\react-native-0.55.3.aar">

在

binding/ReactNative.Droid/ReactNative.Droid.csproj

文件中。

也就是说，这很可能会爆炸。该项目捆绑了非常过时的 AAR，这些 AAR 由 RN 本身使用，因此您将通过更改核心版本获得一堆额外的构建冲突，除非 Xamarin 足够聪明以放弃那些有利于最新 RN 所需的更新的 AAR。您需要检查 RN android 存储库中的依赖项，并根据它更新所有内容。

现在，你想这样做是为了运行 WASM……react-native 不运行 WASM。事实上，react-native 不会运行所有你想扔给它的 JS 代码。它运行嵌入式js引擎支持的JS代码，在最新版本中，Hermes，Hermes不支持WASM：

https://github.com/facebook/hermes/issues/429

您将不得不通过 JSI 链接不同的 JS 引擎（这有点难。我希望现在有文档，但是几年前我尝试时，除了中文博客之外，整个互联网上的文档为零），或者通过网络视图运行。所以你在每个平台上都会有大量的额外工作，而且速度更慢。

最重要的是，Apple 不喜欢这种东西。请记住。

Android-wise，你最好的选择是使用

https://developer.android.com/develop/ui/views/layout/webapps/jsengine

或者链接到一个能够执行 WASM 的可嵌入 JS 引擎（也许是 Zipline）