reactjs 如何将react-native-vector-icon与react-native-web一起使用？

yduiuuwa 于 2023-03-01 发布在 React

关注(0)|答案(4)|浏览(148)

我已经设置了monorepo项目与react-native和react-native-web。我共享相同的代码库为Android，iOS和Web。安装react-native-vector-icons后，我已经在所有三个平台上运行代码，它在Android和iOS中工作正常，但在Web中没有。在Web中，它看起来如下：

我已经按照此处的说明设置了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}/>

我不知道为什么图标没有加载，或者我错过了什么配置。请帮助我。谢谢你提前。

reactjs

来源：https://stackoverflow.com/questions/60263461/how-to-use-react-native-vector-icons-with-react-native-web

4条答案

按热度按时间

2uluyalo1#

好的，假设你使用的是nextjs和react-native-web，我会一步一步的告诉你如何在web上使用它。
安装所有这些软件包yarn add react-native-vector-icons react-native-svg next-compose-plugins next-transpile-modules
更新您的next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['react-native-vector-icons', 'react-native-svg']);

module.exports = withPlugins([withTM], {
  images: {
    disableStaticImages: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [ 'url-loader?limit=10000', 'img-loader' ]
      },
    );
    return config
  },
});

转到node_modules/react-native-vector-icons/Fonts，复制所有需要的字体，并将它们粘贴到公共文件夹中，就像您向项目添加自定义字体一样，您需要将所有这些字体包含在您的style.css中

@font-face {
    src: url(Ionicons.ttf);
    font-family: "Ionicons";
}

@font-face {
    src: url(FontAwesome.ttf);
    font-family: "FontAwesome";
}

@font-face {
    src: url(MaterialIcons.ttf);
    font-family: "MaterialIcons";
}

@font-face {
    src: url(Feather.ttf);
    font-family: "Feather";
}

@font-face {
    src: url(MaterialCommunityIcons.ttf);
    font-family: "MaterialCommunityIcons";
}

在您的_document. js文件中，确保包含您的style.css文件，如下所示

<Head>
          <link href="/fonts/style.css" rel="stylesheet"/>
        </Head>

最后导入import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
并设置为<Icon name="google-play" size={30} color="#900" />
哇！！！

赞(0）回复(0）举报 2023-03-01

3zwjbxry2#

经过大量的研究，最后，我找到了如下所述的解决方案：

add the TTF files and your custom font file into the public directory

赞(0）回复(0）举报 2023-03-01

vd8tlhqk3#

我刚刚遇到这个问题，但不同的矢量图标从react-native-paper。
在这种情况下，为了正确显示图标，必须在指向ttf文件的全局ccs中定义自定义字体系列。
https://github.com/oblador/react-native-vector-icons#web-with-webpack

赞(0）回复(0）举报 2023-03-01

83qze16e4#

我添加了React原生网络到我现有的RN应用程序。
以下是我做的事情。

已创建公用文件夹，并已将index.html文件添加到其中。（请确保结构正确）
更新了webpack.config.js中index.html文件的路径

plugins: [
new HtmlWebpackPlugin({
    template: path.join(__dirname, 'public/index.html'),
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
    // See: https://github.com/necolas/react-native-web/issues/349
    __DEV__: JSON.stringify(true),
}),

]，

在webpack.config.js中添加了react-native-vector-icon包以编译节点模块数组

const compileNodeModules = [
   // Add every react-native package that needs compiling
   // 'react-native-gesture-handler',
 'react-native-vector-icons',
  ].map((moduleName) => path.resolve(appDirectory, 
 `node_modules/${moduleName}`));

已在公用文件夹中创建字体文件夹。
已将node_modules/react-native-vector-icon/Fonts中的所有所需字体复制到Public/Fonts
在styles标签中为index.html添加了样式，或者您可以为此创建单独的样式文件。

@font-face {
     src: url(Fonts/Ionicons.ttf);
     font-family: "Ionicons";
  }

而且成功了。谢谢你，你的回答帮助了我。

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 如何将react-native-vector-icon与react-native-web一起使用？

4条答案

相关问题

热门标签

最新问答