如何模拟native -native项目中的native模块?

Question

我正在工作运行我的react-native应用程序与expo，我面临的问题是模拟的原生模块导出的"react-native"，我目前的解决方案是使用babel-plugin-module-resolver插件来重定向"react-native"我的react-native-proxy模块模块，该模块导出一个扩展了原生模块的代理对象。

一切顺利，直到我想使用expo-file-system要模拟我们的本机文件系统api，expo-file-system是一个es模块，一个错误看起来是由模块混合使用引起的。我在baby .config.js中尝试了import * as FileSystem from 'expo-file-system';，"react-native-proxy";模块metro.config.js抛出了一个错误。

我怎么能要求一个es模块在babel.config.js或babel-plugin?或者有实现上述目标的想法吗?

谢谢。

Answer 1

自己解决。据我所知，从"react-native"导出的原生模块对象是在Libraries/BatchedBridge/NativeModules.js中创建的，所以我将模拟目标更改为这个文件。我创建了一个文件名"NativeModulesProxy.js"从"Libraries/BatchedBridge/NativeModules.js"中复制的内容，然后使用babel-plugin-module-resolver插件将src文件重定向到此文件。

// babel.config.js
const resolvePath = require('babel-plugin-module-resolver').resolvePath;
const path = require('path');
...
plugins: [
[
'module-resolver',
{
resolvePath(sourcePath, currentFile, opts) {
if (sourcePath.includes('NativeModules')) {
const sourceAbsolutePath = path.resolve(path.dirname(currentFile), sourcePath);
if (sourceAbsolutePath.endsWith('node_modules/react-native/Libraries/BatchedBridge/NativeModules')) {
return path.resolve(__dirname, 'NativeModulesProxy');
}
}
return resolvePath(sourcePath, currentFile, opts);
}
}
]
],
...

原生模块对象是一个全局引用。在此基础上，我可以创建自己的代理对象，如"global. mynativeemoduleproxy "这结合了全球。nativeModuleProxy和我的模拟本地模块。