跨平台组件 react-native-web

Question

我使用 react-native-web 并且我想创建跨平台组件。我想通过平台区分每个组件。

所以我遵循了这个教程：https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

我有 3 个文件 :
- friendsList.android.js
- friendsList.ios.js
- friendsList.web.js

而对于导入 FriendsList，在 index.android.js、index.ios.js index.web.js 中：

Import FriendsList from './friendsList';

在 Ios 和 Android 上，它工作正常。但在网络上，它无法识别该文件。我实际上有 3 个解决方案：
- 导入时指定：import FriendsList from './friendsList.web';
- 定义一个为每个平台调度的服务
- 或者 在 webpack 中定义一个别名：

 resolve: {
        alias: {
            'react-native': 'react-native-web',
            './friendsList': './friendsList.web',
        },
    },

有没有不用这种方法导入 .web 的方法？
也许它不认为那样做？

Answer 1

根据 react-native-web getting started 文档，您需要设置扩展。

resolve: {
  // Maps the 'react-native' import to 'react-native-web'.
  alias: {
    'react-native': 'react-native-web'
  },
  // If you're working on a multi-platform React Native app, web-specific
  // module implementations should be written in files using the extension
  // `.web.js`.
  extensions: [ '.web.js', '.js' ]
}