跨平台组件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.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这种方式？
也许这不是这样做的？

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