Expo react-native 不使用 fontFamily

Question

I want to add custom font to my react native application. But I can't to add custom font Roboto. I tried using

await Font.loadAsync({
    'Roboto-Black': require('../fonts/Roboto-Black.ttf'),
    'Roboto-BlackItalic': require('../fonts/Roboto-BlackItalic.ttf'),
    'Roboto-Bold': require('../fonts/Roboto-Bold.ttf'),
    'Roboto-Italic': require('../fonts/Roboto-Italic.ttf'),
    'Roboto-Light': require('../fonts/Roboto-Light.ttf'),
    'Roboto-LightItalic': require('../fonts/Roboto-LightItalic.ttf'),
    'Roboto-Medium': require('../fonts/Roboto-Medium.ttf'),
    'Roboto-MediumItalic': require('../fonts/Roboto-MediumItalic.ttf'),
    'Roboto-Regular': require('../fonts/Roboto-Regular.ttf'),
    'Roboto-Thin': require('../fonts/Roboto-Thin.ttf'),
    'Roboto-ThinItalic': require('../fonts/Roboto-ThinItalic.ttf')
  })

And

import {
  useFonts,
  Roboto_100Thin,
  Roboto_100Thin_Italic,
  Roboto_300Light,
  Roboto_300Light_Italic,
  Roboto_400Regular,
  Roboto_400Regular_Italic,
  Roboto_500Medium,
  Roboto_500Medium_Italic,
  Roboto_700Bold,
  Roboto_700Bold_Italic,
  Roboto_900Black,
  Roboto_900Black_Italic,
} from '@expo-google-fonts/roboto'

let [fontsLoaded] = useFonts({
    Roboto_100Thin,
    Roboto_100Thin_Italic,
    Roboto_300Light,
    Roboto_300Light_Italic,
    Roboto_400Regular,
    Roboto_400Regular_Italic,
    Roboto_500Medium,
    Roboto_500Medium_Italic,
    Roboto_700Bold,
    Roboto_700Bold_Italic,
    Roboto_900Black,
    Roboto_900Black_Italic,
  });

And

"rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  },

Nothing work on android. And if I put to fontFamily some text have not any error.

fontFamily: "lorem ipsumasdfasdfasdfadf"

No error on it...

Answer 1

you can try using the { useFonts } library from 'expo-font' like below.

 import { useFonts } from 'expo-font';



 let [fontsLoaded] = useFonts({
'Roboto': require('./assets/fonts/Roboto.otf'),});

if (!fontsLoaded) {
    return (
        <SafeAreaProvider>
            <SafeAreaView>
                <AppLoading fontsLoaded={fontsLoaded} />
            </SafeAreaView>
        </SafeAreaProvider>
    );

Please also view the documentation in expo website: https://docs.expo.io/guides/using-custom-fonts/