我使用react原生web创建了一个项目，我得到了除故事书外适用于web和移动设备的react原生图标。我不知道如何告诉故事书webpack配置加载FontAwesome字体。我尝试在preview-head.html中添加FontAwesome，但仍然没有将图标显示为一个矩形占位符。我想让我的图标出现在故事书的webpack服务器上。
.storybook/main.js:
const webpack = require('webpack');
const path = require('path');
const rootDir = path.join(__dirname, '..');
module.exports = {
stories: ['../src/storybook/stories/*.stories.tsx'],
// addons: ['@storybook/addon-docs', '@storybook/addon-viewport', '@storybook/addon-knobs/', '@storybook/addon-links/', '@storybook/addon-actions/'],
webpackFinal: async config => {
config.module.rules.push({
test: /.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options: {
transpileOnly: true
}
}
],
},
{
test: /.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(
__dirname,
'../node_modules/react-native-vector-icons',
),
},
{
test: /.(js|jsx|ts|tsx)$/,
exclude: /node_modules[/\](?!react-native|react-native-vector-icons|react-color|react-native-gesture-handler|@react-native-community|react-navigation|@react-navigation/.*)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'module:metro-react-native-babel-preset',
'@babel/preset-env',
'@babel/preset-flow',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
'react-native-web',
],
},
},
},
)
config.plugins.push(
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== 'production',
}),
);
config.resolve.alias = {
...(config.resolve.alias || {}),
'react-native': 'react-native-web',
'@storybook/react-native': '@storybook/react',
'@sentry/react-native': '@sentry/react',
'react-native-maps': 'react-native-web-maps',
'react-native-gesture-handler/GestureHandler': require.resolve(
'react-native-gesture-handler/GestureHandler',
),
'react-native-gesture-handler/RNGestureHandlerModule': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler/RNGestureHandlerModule.web.js',
),
'./RNGestureHandlerModule': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler/RNGestureHandlerModule.web.js',
),
'./GestureHandlerButton': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'GestureHandlerButton.web.js',
),
'./GestureComponents': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'GestureComponents.web.js',
),
'./PlatformConstants': path.join(
rootDir,
'node_modules',
'react-native-gesture-handler',
'PlatformConstants.web.js',
),
'@utilities': path.resolve(__dirname, '../src/utilities/'),
'@queries': path.resolve(__dirname, '../src/queries'),
'@pages': path.resolve(__dirname, '../src/components/pages'),
'@styled-components': path.resolve(
__dirname,
'../src/types/libraries/styled-components.ts',
),
'@hooks': path.resolve(__dirname, '../src/hooks'),
'@atoms': path.resolve(__dirname, '../src/components/atoms'),
'@molecules': path.resolve(__dirname, '../src/components/molecules'),
'@resources': path.join(__dirname, '../src/resources'),
'@providers': path.resolve(__dirname, '../src/providers'),
'@enums': path.resolve(__dirname, '../src/enums'),
'@common': path.resolve(__dirname, '../src/components/common'),
'@contexts': path.resolve(__dirname, '../src/contexts'),
'@util': path.resolve(__dirname, '../src/components/util'),
'@images': path.resolve(__dirname, '../src/assets/images'),
'@icons': path.resolve(__dirname, '../src/assets/icons'),
'@fonts': path.resolve(__dirname, '../src/assets/fonts'),
};
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
return config;
},
};
.storybook/preview-head.html
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<style type="text/css">
@font-face {
font-family: Quicksand-Bold;
src: url('https://fonts.gstatic.com/s/a/6bb475d143c61221c4ea174d3c51728268e58b12dbc14600d59020ef8deaaead.ttf');
}
@font-face {
font-family: Quicksand-Regular;
src: url('https://fonts.gstatic.com/s/a/0f408f35c3679417b5580701f3ac08830ce36535af5a643a2ef5b59e91c3c6b7.ttf');
}
@font-face {
font-family: Lato-Regular;
src: url('https://fonts.gstatic.com/s/a/a649aaf21573a59079c46db19314fd95648f531e610fa932101f2705616b2882.ttf');
}
@font-face {
font-family: Lato-Bold;
src: url('https://fonts.gstatic.com/s/a/407592da08cb1f6060fbc69262ad33edd0b61ec9160521455eca8f726bbd4353.ttf');
}
</style>
<script>
import FontAwesome from '../node_modules/react-native-vector-icons/FontAwesome.js';
// Generate required css
import {iconFont} from '../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
src: url(${iconFont});
font-family: FontAwesome;
}`;
// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = iconFontStyles;
} else {
style.appendChild(document.createTextNode(iconFontStyles));
}
// Inject stylesheet
document.head.appendChild(style);
try {
FontAwesome.loadFont();
console.log("working!");
} catch (e) {
console.log(e);
}
</script>
软件包.json
"storybook:web": "start-storybook -p 6006"
我认为preview-head.html中存在问题，我知道我不能在脚本标记中使用导入模块，但不确定在哪里加载fontAwesome，以便故事书可以使用它。谢谢
自从回答了这个问题后，React Native with Storybook的推荐方法发生了变化。因此，如果您使用@storybook/addon-react-native-web在浏览器中运行Storybook，以下是我如何使自定义字体工作的方法。
我创建了以下FontLoader组件，它围绕着我的应用程序的提供者树。因此，对于Storybook，我将加载器添加到.storybook/preview.js中的全局装饰器中。(需要明确的是，我没有任何特殊的webpack配置。(
// FontLoader.tsx
import React, { PropsWithChildren, useCallback } from 'react'
import { View } from 'react-native'
import { useFonts } from 'expo-font'
import { theme, fontName } from '@theme'
interface Props extends PropsWithChildren {
onFontsLoaded?: () => void // callback for displaying the splash screen once background view has loaded
}
export const FontLoader = ({ onFontsLoaded, children }: Props) => {
const [fontsLoaded] = useFonts({
[fontName]: require('../../assets/fonts/Inter-Regular.otf'),
'inter-italic': require('../../assets/fonts/Inter-Italic.otf'),
'inter-light': require('../../assets/fonts/Inter-Light.otf'),
'inter-medium': require('../../assets/fonts/Inter-Medium.otf'),
'inter-bold': require('../../assets/fonts/Inter-Bold.otf'),
'inter-black': require('../../assets/fonts/Inter-Black.otf'),
})
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
onFontsLoaded?.()
}
}, [fontsLoaded, onFontsLoaded])
if (!fontsLoaded) {
return null
}
return (
<View onLayout={onLayoutRootView} style={{ flex: 1, backgroundColor: theme.colors.$background }}>
{children}
</View>
)
}
// .storybook/preview.js
import React from 'react'
import { FontLoader } from '../src/utils/FontLoader'
import { ThemeProvider } from '../src/theme'
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
export const decorators = [
Story => (
<FontLoader>
<ThemeProvider>
<Story />
</ThemeProvider>
</FontLoader>
),
]
对于任何对此有问题的人，我需要具体说明要为url加载程序包含哪个文件。
此更改修复了错误：
{
test: /.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(
__dirname,
'../node_modules/react-native-vector-icons/FontAwesome5.js',
),
},
我还将字体很棒的脚本移到了preview.js文件中