React原生web故事书react- native -vector-icons问题图标

Question

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

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

下面是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,
  },
}

Answer 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