Expo Web: @Expo/Vector -ICons -Symbole, die nach NPX Expo Export -P -Web nicht geladen werden (Download -Schriftart fehl ⇐ Android

[Anonymous]

Frage: < /p>
Ich erstelle eine React -native App mit Expo und bereitete sie als statische Web -App mit Expo -Router ein. Auf der Browserkonsole erhalte ich:
Download-Schriftart: https://shoping-list-08090208.web.app/a ... =web&hash=. sfntversion: 1008813135 < /p>
und alle meine Materialicons, Entypo und andere Ikonen können nicht rendern. app/_layout.tsx:
await Font.loadAsync({
'Material Icons': require('../assets/fonts/MaterialIcons.ttf'),
'Material Design Icons': require('../assets/fonts/MaterialCommunityIcons.ttf'),
Entypo: require('../assets/fonts/Entypo.ttf'),
});
< /code>
Ergebnis:
schlägt im Web immer noch fehl und hat in der Konsole nicht heruntergeladen. /> Ergebnis:
hat das Problem nicht behoben. Ordner. /> Plattform: Nur Web (iOS/Android fein)
Erwartete Verhalten
Icons von @Expo/Vector-Icons (Materialsicons, Entypo usw.) sollten nach dem Expo-Exportieren und Bereitstellungsfehlern korrekt angezeigt werden. /> Tatsächliches Verhalten < /p>
Schriftarten nicht laden und Icons rendern nicht. Wird die Vektor-Symbolschriften nicht im Web vorgeladen? @Expo /Vector-ICons Schriftarten für Web-Builds mit Expo-Router?
import 'dotenv/config';
process.env.EXPO_ROUTER_APP_ROOT = 'app';

export default {
expo: {
name: 'Shopping List',
slug: 'shopping-list',
version: '1.0.0',
orientation: 'portrait',
icon: './app/assets/images/icon.png',
scheme: 'shoppinglist',
userInterfaceStyle: 'automatic',
platforms: ['ios', 'android', 'web'],
android: {
package: '...',
googleServicesFile: './google-services.json',
intentFilters: [
{
action: 'VIEW',
data: [
{ scheme: 'shoppinglist' },
{
scheme: 'https',
host: '...',
},
],
category: ['BROWSABLE', 'DEFAULT'],
},
],
},
web: {
bundler: 'metro',
output: 'static',
favicon: './app/assets/images/icon.png',
},
assetBundlePatterns: ['**/*'],
extra: {
eas: {
projectId: '...',
},
},
plugins: [
'expo-router',
['expo-build-properties', { ios: { useFrameworks: 'static' } }],
'@react-native-firebase/app',
'@react-native-firebase/auth',
],
experiments: {
typedRoutes: true,
},
},
};

```
firebase.json:```{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [{ "source": "**", "destination": "/index.html" }],
"headers": [
{
"source": "**/*.ttf",
"headers": [{ "key": "Content-Type", "value": "font/ttf" }]
}
]
}
}

< /code>
So lade ich die Symbole: < /p>
import { MaterialIcons } from '@expo/vector-icons';


< /code>
Gibt es eine korrekte Möglichkeit, diese Schriftarten während des statischen Exports zu laden, damit die Symbole korrekt rendern? _layout.tsx oder global
Die korrekte Konfiguration für app.config.js und firbase.json
Verifizierte Arbeitslösung für Expo -Export: Web + Firebase Hosting