Expo Web: @Expo/Vector -ICons, не загружаясь после NPX Expo Export -p Web (не удалось декодировать загруженный шрифт) ⇐ CSS

[Anonymous]

Question:
I'm building a React Native app using Expo and deploying it as a static web app with expo-router.
Everything works fine on iOS and Android, but when I build for web using:
npx expo export -p web
…my app builds successfully and deploys to Firebase Hosting, but on Консоль браузера я получаю:
Не удалось декодировать загруженную шрифт: https://shopping-list-08090208.web.app/ ... =web&hash=....> votsing fromsff? 1008813135 < /p>
И все мои материалы, entypo и другие значки не могут отображаться. 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>
Результат:
по -прежнему терпит неудачу в Интернете, и бросает «не удалось декодировать загруженный шрифт» в консоли. < /p>

Пробое переопределение .loadfont () вручную
(Materialicons как) .loadfont = async () => {}; /> Результат:
не решил проблему. < /p>

Проверенный app.config.js
assetbundlepatterns: ['' ** /*'] < /li>
< /ol>
Результат:
fonts fonts fonts fonts. Папка.
среда
expo sdk: 51
Expo-Router: Последний
@expo/vector-iCons: expo
deploment: export expo: expo
deplo /> Платформа: только веб-сайт (iOS/Android fine)
Ожидаемое поведение
Иконки из @expo/vector-icons (материалы, entypo и т. Д.) Должны отображаться после экспорта Expo: web и развертывание. Поведение < /p>
шрифты не загружаются, а значки не визуализируются. < /P>
Консоль показывает «не удалось декодировать загруженный шрифт» и «Ошибка отображения OTS». < /P>
происходит только в Интернете после экспорта. векторные шрифты в Интернете? Экспо /векторные шрифты для веб-сборки с экспозицией?
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>
Вот как я загружаю значки: < /p>
import { MaterialIcons } from '@expo/vector-icons';


< /code>
Существует ли правильный способ сделать экспозицию загружать эти шрифты во время статического экспорта, чтобы иконки рендерировали правильно? или глобально
Правильная конфигурация для app.config.js и firebase.json
Проверенное рабочее решение для экспорта Expo: web + хостинг Firebase

Подробнее здесь: https://stackoverflow.com/questions/797 ... -p-web-fai