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' ]
}

跨平台组件react-native-web

1 个答案: