クロスプラットフォームコンポーネントreact-native-web

Question

私はreact-native-webを使用しています。クロスプラットフォームコンポーネントを作成したいと思います。プラットフォームごとに各コンポーネントをと区別したいと思います。 friendsList.android.js
- - friendsList.ios.js
- friendsList.web.js

そして用
：私は3つのファイルを持っているhttps://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

：

は、だから私は、このチュートリアルに従っインポート 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-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' ] 
}