React Native web 故事书 react-native-vector-icons 问题图标答案

【问题标题】：React native web storybook react-native-vector-icons problem iconReact Native web 故事书 react-native-vector-icons 问题图标
【发布时间】：2021-01-26 12:00:29
【问题描述】：

我正在 Storybook 上开发一个 react native 组件，它使用 react-native-paper 和 react-native-vector-icons。

问题是我看不到图标，我尝试按照 react-native-vector-icons 上的指南进行操作，这个：webpack

下面是webpack，但我不太明白如何使用指南中建议的代码的第二部分，我应该在哪里以及如何使用它。

谁能帮帮我？

网页包：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react',
      'styled-components/native': 'styled-components',
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-flow',
              '@babel/preset-typescript',
              {
                plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
              },
            ],
          },
        },
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader',
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader', // or directly file-loader
        include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true,
  },
}

【问题讨论】：

标签： javascript react-native webpack react-native-paper react-native-vector-icons

【解决方案1】：

问题的原因可能是您的 webpack.config.js 位于文件夹 .storybook 中。因此，由于文件夹结构，您必须更改加载 react-native-vector-icons 的路径并在 node_modules 之前添加 ../。

 ... 
 {
    test: /\.ttf$/,
    loader: 'url-loader', // or directly file-loader
    // add .. to the path for node_modules
    include: path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
 },
 ...

这里已经描述并解决了一个类似的问题：React Native Vector Icons don't load on react-native-web storybook

【讨论】：