Expo react-native 不使用 fontFamily

Question

我想將自定義字體添加到我的 react 本機應用程序中。 但我不能添加自定義字體 Roboto。 我嘗試使用

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')
  })

和

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,
  });

和

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

android 沒有任何作用。 如果我把一些文本放到 fontFamily 中，則沒有任何錯誤。

fontFamily: "lorem ipsumasdfasdfasdfadf"

它沒有錯誤...

Answer 1

您可以嘗試使用來自 'expo-font' 的 { useFonts } 庫，如下所示。

 import { useFonts } from 'expo-font';



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

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

另請查看 expo 網站中的文檔： https://docs.expo.io/guides/using-custom-fonts/