reactjs - react 和 react 原生项目之间的模块解析？

Question

我们有两个项目共享一个 API 包装库（我们创建的），它使用pusher-js库进行 websocket 通信。

API 包装器最初是为基于 NextJS 的 Web 版本项目构建的，但现在我们希望将其包含在我们的新 React Native 项目中。问题在于我们实例化的 API 包装器内部pusher，import pusher from 'pusher-js而要在 React Native 上工作，我们需要这样做import pusher from 'pusher-js/react-native。这个库显然不知道谁安装它的外部使用，只是将这些东西设置为一个方便的包装器。

这如何在移动项目中实现，或者应该在 API 库中设置？我已经通过 babel 插件查看了模块解析，但不确定如何为这个实例设置它。

Answer 1

您可以为移动设备提供特定于平台的文件。

// pusher.ts
import pusher from 'pusher-js';
export default pusher;

// pusher.native.ts
import pusher from 'pusher-js/react-native';
export default pusher;

// whenever you need pusher
import pusher from './pusher';

React Native 将为pusher.native您导入。https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web