如何在 React-Native 中加载 .wasm 文件？答案

【问题标题】：How to load .wasm file in React-Native?如何在 React-Native 中加载 .wasm 文件？
【发布时间】：2020-06-25 16:00:24
【问题描述】：

我一直在尝试在 React-Native 应用程序中加载 WebAssembly (.wasm) 文件 - 生成的 C++ 代码由 Emscripten 编译为 WebAssembly。

这是我获取 .wasm 文件的代码：

import fs from 'react-native-fs';

if (!global.WebAssembly) {
  global.WebAssembly = require('webassemblyjs');
}

const fetchWasm = async () => {
  const wasm = await fetch(`${fs.MainBundlePath}/calculator.wasm`);

  console.log(wasm);
  // Returns: Response {type: "default", status: 200, ok: true, statusText: undefined, headers: Headers, …}

  const mod = await WebAssembly.instantiateStreaming(wasm);

  console.log(mod);
  // Throws: TypeError: Failed to execute 'compile' on 'WebAssembly': An argument must be provided, which must be a Response or Promise<Response> object
};

我在 Google 搜索结果中尝试了所有我能找到的东西，但到目前为止没有任何效果。不幸的是，最相关的问题没有得到解答。

有没有人知道我做错了什么？任何帮助将不胜感激！

【问题讨论】：

根据docsWebAssembly.instantiateStreaming，返回一个promise。为了检索其输出，我认为您需要添加 .then()
我使用 await 来获取 Promise 的结果并将其分配给 'mod' 变量。
试试：const mod = await WebAssembly.instantiateStreaming(wasm).then(mod => console.log(mod));
只是一个疯狂的猜测，因为我想我以前遇到过类似的问题。我认为您的 wasm 变量不是实际对象，否则 console.log 不会在开头附加“响应”。您可能需要使用JSON.parse(wasm)。
你成功了吗？

标签： javascript react-native webassembly

【解决方案1】：

要加载 wasm 时需要注意一件事：

您的网络服务器必须将 .wasm mime 类型报告为 "application/wasm" ，否则您将无法加载它。

【讨论】：

【解决方案2】：

我假设仍然是 React-native JS 运行时 JSC 在 Android 构建中仍然不支持 WebAssembly 问题仍然存在 https://github.com/react-native-community/jsc-android-buildscripts/issues/113

另一种方法是使用 Webview，但我认为这不是您所期望的。 https://github.com/ExodusMovement/react-native-wasm

【讨论】：