Estoy tratando de cargar las fuentes descargadas junto con las fuentes de Google usando Font.loadAsync pero me da un error:
Unable to resolve module ../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf from /Users/bilal/Work/datumbrain/erp-app/src/utils/useFonts.js: None of these files exist: * SFUIText-Bold.ttf * assets/fonts/sf-ui-text/SFUIText-Bold.ttf/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg) Aquí está mi código en App.js :
import { useCallback, useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Provider } from 'react-redux'; import colors from './src/constants/colors'; import AppNavigator from './src/navigation/AppNavigator'; import { store } from './src/redux/store'; import * as SplashScreen from 'expo-splash-screen'; import * as Font from 'expo-font'; import { FiraSans_300Light, FiraSans_400Regular, FiraSans_500Medium, } from '@expo-google-fonts/fira-sans'; import { useFonts } from './src/utils/useFonts'; const App = () => { const [appIsReady, setAppIsReady] = useState(false); const prepare = async () => { try { const customFonts = await useFonts(); await SplashScreen.preventAutoHideAsync(); await Font.loadAsync({ 'Fira Sans 300': FiraSans_300Light, 'Fira Sans 400': FiraSans_400Regular, 'Fira Sans 500': FiraSans_500Medium, ...customFonts, }); } catch (e) { console.warn(e); } finally { setAppIsReady(true); console.log('Loaded fonts...'); } }; const onLayoutRootView = useCallback(async () => { if (appIsReady) { await SplashScreen.hideAsync(); } }, [appIsReady]); useEffect(() => { prepare(); }, []); useEffect(() => { onLayoutRootView(); }, [onLayoutRootView]); if (!appIsReady) { return null; } return ( <Provider store={store} style={styles.container}> <AppNavigator /> </Provider> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.light, alignItems: 'center', justifyContent: 'center', }, }); export default App; y useFonts.js :
import * as Font from 'expo-font'; export const useFonts = async () => { await Font.loadAsync({ SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf'), }); };Por favor, asegúrese de que la ruta aquí sea correcta.
SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf') Para Font.loadAsync , me parece perfecto. Como extra, puede usar useFont hook para que su manejo se vea mejor. (Utiliza Font.loadAsync debajo)
useFonts no devuelve nada, por lo que no necesita propagación en prepare() . Si se llama, las fuentes se cargarán de todos modos.