![](/img/trans.png)
[英]React native web storybook react-native-vector-icons problem icon
[英]React-native with storybook problem react-native-vector-icons and 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 单独测试/开发组件。
这里描述的解决方案对我有用。
据我了解,问题是由于在编译期间未包含插件@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 的例子; 我上面提到的解决方案首先出现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.