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

Question

​

​

我们正在用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"
  }

Answer 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',
    include: path.resolve(__dirname, '../node_modules/react-native-vector-icons/Fontisto.js')
  })

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

  return config
}

附言:我使用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)
//

希望这一切都能解决！

附注:对不起，我觉得值得一提的是，我不确定这个Babel配置是否更好地放在.storybook/main.js as recommended by Storybook.js中。我不能让这个方法工作；我也找不到任何关于我如何去做的例子；我上面提到的解决方案是第一位的。