React native web 故事書 react-native-vector-icons 問題圖標

Question

我正在故事書上開發一個反應原生組件，它使用 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 位於 folder.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