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 單獨測試/開發組件。

這里描述的解決方案對我有用。

據我了解，問題是由於在編譯期間未包含插件@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
}

PS我使用這個人的問題來獲得推薦的“網絡”安裝。 我的.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)
//

希望一切順利！

PPS抱歉，值得一提的是，我不確定這個 Babel 配置是否更好地按照 Storybook.js 的建議放在.storybook/main.js中。 我無法使這種方法起作用； 並且找不到任何關於我如何做 go 的例子； 我上面提到的解決方案首先出現。