React native web storybook react-native-vector-icons 问题图标

问题描述

我正在故事书上开发一个 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,}

解决方法

您的问题的原因可能是您的 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

javascript react-native react-native-paper react-native-vector-icons webpack webpack webpack