React-native 与故事书问题 react-native-vector-icons 和 react-native-paper

问题描述

我们正在 react-native 中开发一个使用 react-native-paper 的组件，因为这也适用于 web，我们希望使用 storybook 能够创建基本示例也可以在浏览器上测试。

但是我们遇到了以下错误的问题，这些错误不取决于我们，而是取决于我们使用的库。

正如您在错误下方看到的，组件似乎加载了数据。

有人知道如何帮助我们了解确切的错误是什么（以防万一以及如何解决它），还可以联系指示的模块以更正它们。

"dependencies": {
    "react": "16.13.1","react-native": "0.63.1","react-native-paper": "^4.5.0","react-native-vector-icons": "^7.1.0","react-native-web": "^0.13.4","styled-components": "^5.1.1"
  }

解决方法

遇到同样的问题；我正在制作同时适用于 react-dom 和 react-native（使用 react-native-web）的组件。我还使用 Storybook 单独测试/开发组件。

solution described here 对我有用。

据我所知，该问题是由于编译过程中未包含插件 @babel/plugin-proposal-class-properties。

我最终得到了以下 .storybook/webpack.config.js;因为我链接的解决方案有点格式错误。

const path = require('path')

module.exports = async ({config,mode}) => {
  config.module.rules.push({
    test: /\.(js|jsx|ts|tsx)$/,loader: 'babel-loader',include: path.resolve(__dirname,'../node_modules/'),options: {
      presets: [
        "@babel/env","@babel/preset-react","module:metro-react-native-babel-preset",],plugins: [
        "react-native-web","@babel/plugin-proposal-class-properties"
      ]
    }
  })

  config.module.rules.push({
    test: /\.ttf$/,loader: 'url-loader','../node_modules/react-native-vector-icons/Fontisto.js')
  })

  config.resolve.alias = {
    'react-native': 'react-native-web'
  }

  return config
}

P.S. 我使用 this person's issue 使 recommended installation for "web" 正常工作。我的 .storybook/preview.js 看起来像这样：

... (export parameters,export globalTypes,etc..)

// ==
import Fontisto from '../node_modules/react-native-vector-icons/Fontisto'
import iconFont from '../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf'

const iconFontStyle =`
  @font-face {
    src: url(${iconFont});
    font-family: Fontisto;
  }
`

const style = document.createElement('style')
style.type = 'text/css'
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyle
} else {
  style.appendChild(document.createTextNode(iconFontStyle))
}
document.head.appendChild(style)
//

希望一切顺利！

P.P.S 抱歉，觉得值得一提的是，我不确定这个 Babel 配置是否更好地放在 .storybook/main.js as recommended by Storybook.js 中。我不能让这个方法起作用；并且找不到任何关于我如何去做的例子；我上面提到的解决方案首先出现。

javascript react-native react-native-paper react-native-vector-icons storybook