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

Question

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

API wrapper最初是为基于NextJS的web版本项目构建的，但现在我们希望将其包含在新的React Native项目中。问题出在我们实例化pusher的API包装器中，我们使用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