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

[Anonymous]

Я строю нативное приложение React, используя Expo и развертываю его в качестве статического веб-приложения с экспозицией.

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

npx expo export -p web
< /code>
Мое приложение успешно создается и развертывается в хостинге Firebase, но на консоли браузера я получаю: < /p>
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
< /code>
и все мои материалы, Entypo и другие значки не могут рендерировать.
Что я попробовал: < /p>
[h4] 1. Пробовал шрифты вручную загрузку вручную [/h4]
Я использовал 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'),
});
< /code>
по -прежнему терпит неудачу в Интернете, и бросает «не удалось декодировать загруженный шрифт» в консоли. < /p>
[h4] 2. Попроеклся переоценки loadfont () 

вручную [/h4]

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

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

не исправил проблему.

3. Проверенный app.config.js < /h4>
[code]assetBundlePatterns: ['**/*'][/code]
шрифты правильно включены в папку Exported/Dist/Assets.
среда

• expo sdk: 51
• expo-rouder: afdent
• Expo
• Deployment: Firebase Hosting (expo export:web)
• Platform: Web only (iOS/Android fine)

Expected Behavior

Icons from @expo/vector-icons (MaterialIcons, Entypo, etc.) should display correctly after expo Экспорт: Интернет и развертывание.

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

шрифты не загружаются, а значки не визуализируют.

Консоль не удалось декодировать загруженный шрифт и etts parsing error .
происходит только на веб -export. export. /> допущения < /h4>

Может быть, выставка не предварительно загружает шрифты векторного значка в Интернете? рендеринг? Нужно ли что -нибудь изменить в app.config.js или firebase.json?

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

    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';

Существует ли правильный способ сделать выставку загрузки этих шрифтов во время статического экспорта, чтобы иконки рендерировали правильно?>

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