Как использовать response-native-vector-icons с реагировать-native-web? - PullRequest
Новая
       65

Как использовать response-native-vector-icons с реагировать-native-web?

3 голосов
/ 17 февраля 2020

Я настроил монорепроект с react-native и react-native-web. Я использую одну и ту же кодовую базу для Android, iOS и Web. После установки response-native-vector-icons я запустил код на всех трех платформах, и он отлично работает в Android и iOS, но не в Web. В Интернете это выглядит так:

enter image description here

Я настроил Webpack согласно описанию здесь

ниже - моя Webpack конфигурация config-overrides.js: 

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
    test: /\.ttf$/,
    loader: "file-loader",
    include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"),
};
module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    );
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = ttf; //add the react-native-vector-icons here
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({__DEV__: env !== 'production'})
    );
    return config
};

Ниже приведено использование react-native-vector-icons в моем App.js файле 

import Icon from 'react-native-vector-icons/dist/FontAwesome';

<Icon name="glass" size={24}/>

Я не Не знаю, почему значки не загружаются или что я пропустил для настройки. Пожалуйста, помогите мне. Заранее спасибо.

1 Ответ

0 голосов
/ 23 апреля 2020

Я только что столкнулся с этой, но другой проблемой с векторной иконкой из react-native-paper.

В этом случае для правильного отображения иконки необходимо определить семейство пользовательских шрифтов в глобальных ccs, указывающих на файл ttf.

https://github.com/oblador/react-native-vector-icons#web с веб-пакетом

...