Niestandardowa czcionka w React Native
W React Native korzystającym z Expo możesz korzystać z niestandardowych czcionek za pomocą biblioteki expo-font. Pozwala ona na ładowanie własnych plików czcionek w aplikacji. Poniżej przedstawiam przykładowy sposób na wczytanie niestandardowej czcionki oraz jej użycie.
Krok 1: Instalacja
npx expo install expo-font expo-splash-screen
Krok 2: Przygotowanie plików czcionki
Dodaj pliki czcionek do katalogu assets/fonts. Wspierane formaty czcionek to OTF i TTF.
Krok 3: Użycie nowej czcionki w aplikacji
import { useFonts } from 'expo-font';
function App() {
const [fontsLoaded] = useFonts({
'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf')
});
return (
<Text style={ fontFamily: 'Roboto-Regular' }>Hello, this is Roboto font!</Text>
);
};
export default App;
Krok 4: Wyświetlanie ekranu powitalnego do momentu załadowania czcionki
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
SplashScreen.preventAutoHideAsync();
useEffect(() => {
if (fontsLoaded) {
SplashScreen.hideAsync();
}
}, [fontsLoaded]);
Cały kod
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
function App() {
SplashScreen.preventAutoHideAsync();
const [fontsLoaded] = useFonts({
'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf')
});
useEffect(() => {
if (fontsLoaded) {
SplashScreen.hideAsync();
}
}, [fontsLoaded]);
return (
<Text style={ fontFamily: 'Roboto-Regular' }>Hello, this is Roboto font!</Text>
);
};
export default App;
Inne z tej kategorii: Programowanie
Takie tam: www.marczuk.org