モバイル (react-native) と Web (create-react-app) の両方で同じ React コンポーネントを使用しようとしています。
react-native-web (以下の構成)のおかげで、これまでのところかなりうまく機能しています。
ただし、react-native プロジェクトで広く使用されている react -native-vector-iconsは、 react-native-web でコンパイルされません。これは、ベクター アイコンを持つコンポーネントを使用するコンポーネントには、特定の Web バージョンも必要であることを意味します。コンポーネントの Web 固有のバージョンを使用すると、メンテナンスに影響します。
create-react-app 構成をイジェクトせずに、Webの react-native-vector-iconsなどのサードパーティに対処する既知の方法はありますか?
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import Font from './Font.json';
export default createIconSetFromIcoMoon(UbeyaFont);
これまでに考えたこと: 現在、次の 2 つのアイデアを検討しています。
環境ベースのインポート:
# Pseudo code: # if mobile import this, otherwise import that.この種の動的インポートが可能かどうかはわかりません
node_modules /react-scriptsに挿入されるWebpack 構成。エレガントではありませんが、とにかく私たちが持っているガルプウォッチを使用すると、構成が常にそこにあることを確認できます.
どんなアイデアや考えでも大歓迎です。
構成: すべての React コンポーネントを保持する新しいプライベート NPM パッケージを作成しました。パッケージをモバイル プロジェクトと Web プロジェクトの両方にコピーするgulp watchを使用することで、開発中に常にnpm を発行して糸を引くという問題を解決します (Webstorm の唯一の欠点索引付けプロセス)。