跨平台组件 react-native-web答案

【问题标题】：Cross platform component react-native-web跨平台组件 react-native-web
【发布时间】：2017-06-08 02:13:12
【问题描述】：

我使用 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.jsindex.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 ？
也许不应该那样做？

【问题讨论】：

标签： react-native react-native-web

【解决方案1】：

根据react-native-webgetting 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' ]
}

【讨论】：