Expo react-native 不使用 fontFamily答案

【问题标题】：Expo react-native doesn't use fontFamilyExpo react-native 不使用 fontFamily
【发布时间】：2021-05-06 09:47:52
【问题描述】：

我想在我的 react native 应用程序中添加自定义字体。但我不能添加自定义字体 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"

没有错误...

【问题讨论】：

标签： javascript react-native fonts expo google-fonts

【解决方案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>
    );

另请查看博览会网站上的文档：https://docs.expo.io/guides/using-custom-fonts/

【讨论】：