当前行为

Question

我目前正在使用Emscripten将基本的C函数编译为JavaScript以在React Native项目中使用。但是，当我从React代码内部导入Module时，Module对象为空。这在React和React Native项目中都会发生。

在我的终端中使用index.js运行node ./index.js会返回预期结果。

我正在编译ping.c并使用以下命令输出ping.js：

emcc ping.c -o ping.js -s WASM=0 -s EXPORTED_FUNCTIONS='["_pingIt"]'

ping.c：

#include <stdio.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int pingIt() {
  return 1;
}

index.js：

let Module = require('./ping.js');

module.exports = Module;

我正在从index.js导出Module并将其导入到我的React代码中。

当前行为

// Running in React
console.log(Module); // returns {}

预期行为

// Running in React
console.log(Module._pingIt()); // should return 1

Answer 1

我偶然发现了Emscripten文档here中的MODULARIZE设置。我编辑了emcc命令：

emcc ping.c -o ping.js -s WASM=0 -s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' -s MODULARIZE=1

MODULARIZE=1是不可思议的地方

现在位于index.js文件中：

let Module = require('./ping.js'); // Your Emscripten JS output file
let pingIt = Module().cwrap('pingIt'); // Call Module as a function

module.exports = pingIt;

现在，在React组件中，您可以import pingIt from '<file-location>';并像其他任何pingIt()一样调用函数。

希望有人觉得这很有用！我找不到许多在React上结合使用Emscripten的示例。

Answer 2

我使用稍微不同的方法从 React Native 调用 ping.c 函数，为模块定义一个 EXPORT_NAME 并在代码中适当的时候创建模块。

使用 Emscripten emsdk：

emcc ping.c -o ping.js -s WASM=0 -s ENVIRONMENT=web -s MODULARIZE=1 -s "EXPORT_NAME='createPingModule'"

在 React Native 组件（App.tsx）中：

import createPingModule from './ping';

...

createPingModule()
  .then(module => {
    console.log('Module created!');
    let a = module._pingIt();
    console.log(a);
});

如何在React / React Native中使用Emscripten编译的JavaScript

当前行为

预期行为

2 个答案: