React Native - 包装在本机模块中创建的本机对象

Question

我有兴趣将一些C ++库包装为反应原生模块，但我正在尝试一些概念墙。这个东西很新，所以忍受我！

我想包装类似于Juce https://juce.com/doc/classAudioProcessorGraph_1_1AudioGraphIOProcessor

的AudioProcessorGraph功能

然而，api的一个重要组成部分是将音频节点对象相互连接以形成音频处理图。你可以想象一些与网络音频api非常相似的东西：

const audioCtx = new AudioContext();
const oscillator = new OscillatorNode(audioCtx);
const gainNode = new GainNode(audioCtx);

oscillator.connect(gainNode).connect(audioCtx.destination);

在我编写单行代码之前，我看到的问题是，我没有看到使用RCT_EXPORT_METHOD宏的方法将本机对象的实例作为参数传递给另一个本机对象的方法调用。 https://nodejs.org/api/addons.html#addons_wrapping_c_objects我使用ObjectWrap功能在本机节点插件上做了类似的事情。无论如何要用react-native来完成类似的东西？

Answer 1

RCT_EXPORT_METHOD用于将功能导出到IOS中的JS端。这里需要注意的是，您通过JS传递给Native或从Native传递给JS的参数应该是可序列化的。这是因为通过RN桥以异步方式进行通信。

这就是我要做的事情。让我们举个例子：

假设您在本机模块中有一个功能

//Initialise a list to store audioContexts
ArrayList<AudioContext> audioCtxList = new ArrayList<AudioContext>();

@ReactMethod
public void createAudioContext(Callback cb){
AudioContext audioCtx = new AudioContext();
audioCtxList.add(audioCtx);
cb.invoke(//...index of the newly created audioCtx)
}

现在在JS方面，你有一个可以用来与本机模块交谈的引用

所以下一个函数看起来像

@ReactMethod
public void createOscillator(int audioCtxId){
 AudioCtx actx = // Get the audioContext from the list using the audioCtxId
 const oscillator = new OscillatorNode(audioCtx);
 const gainNode = new GainNode(audioCtx);
 oscillator.connect(gainNode).connect(audioCtx.destination);
}

因此，您不需要将任何本机对象导出到JS端，您也可以完成您需要的功能。