Expo Web: значки @expo/vector-icons не загружаются после экспорта npx expo -p web (не удалось декодировать загруженный ш ⇐ Android

[Anonymous]

Я создаю приложение React Native с использованием Expo и развертываю его как статическое веб-приложение с помощью expo-router.
Все работает нормально на iOS и Android, но когда я создаю для Интернета, используя:

Код: Выделить всё

npx expo export -p web

Мое приложение успешно собирается и развертывается на хостинге Firebase, но в консоли браузера я получаю:

Код: Выделить всё

Failed to decode downloaded font: https://shopping-list-08090208.web.app/assets/node_modules/@expo/vector-icons/MaterialIcons.ttf?platform=web&hash=...
OTS parsing error: invalid sfntVersion: 1008813135

И все мои MaterialIcons, Entypo и другие значки не отображаются.
Что я пробовал:

1. Попробовал загрузить шрифты значков вручную

Я использовал Font.loadAsync в 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'),
});

По-прежнему происходит сбой в Интернете, и в консоли выдается сообщение «Не удалось декодировать загруженный шрифт».

2. Попробовал переопределить loadFont() вручную

Код: Выделить всё

(MaterialIcons as any).loadFont = async () => {};

Проблема не устранена.

3. Проверено app.config.js

Код: Выделить всё

assetBundlePatterns: ['**/*']

Шрифты правильно включены в экспортированную папку /dist/assets.

Среда

• Expo SDK: 51
• expo-router: последняя версия
• @expo/vector-icons: в комплекте с Expo
• Развертывание: Firebase Хостинг (экспорт экспо: Интернет)
• Платформа: только Интернет (подходит для iOS/Android)

Ожидаемое поведение

Значки из @expo/vector-icons (MaterialIcons, Entypo и т. д.) должны отображаться правильно после экспорта экспо: Интернет и развертывания.

Фактическое Поведение

Шрифты не загружаются, а значки не отображаются.

Консоль показывает «Не удалось декодировать загруженный шрифт и ошибку синтаксического анализа OTS».
Происходит только в Интернете после экспорта.

Предположения

• Возможно, Expo не загружает предварительно загружаемые векторные шрифты значков web?
• Хостинг Firebase не обслуживает шрифты .ttf с правильным типом контента?
• Мне нужно вызвать .loadFont() для каждого набора значков перед рендерингом?

Вопрос

Как правильно предварительно загрузить шрифты @expo/vector-icons для веб-сборок с помощью expo-router? Нужно ли мне что-либо менять в app.config.js или firebase.json?
app.config.js:

Код: Выделить всё

    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" }]
}
]
}
}

Вот как я загружаю значки:

Код: Выделить всё

    import { MaterialIcons } from '@expo/vector-icons';

Есть ли правильный способ заставить Expo загружать эти шрифты во время статического экспорта, чтобы значки отображались правильно?
Иконки отображаются нормально в разработке, но не после экспорта expo -p web.>

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