React Native Expo Google Fonts：不是系统字体，还没有通过 Font.loadAsync 加载答案

【问题标题】：React Native Expo Google Fonts: is not a system font and has not been loaded through Font.loadAsyncReact Native Expo Google Fonts：不是系统字体，还没有通过 Font.loadAsync 加载
【发布时间】：2022-06-17 14:40:57
【问题描述】：

我正在使用 Expo Google Fonts 和 useFonts() 方法为我的应用导入字体。但是我收到以下错误，但我认为我不需要将 Font.loadasync 与 Google 字体一起使用（根据文档 here）。你能告诉我我在这里做错了什么吗？

import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet, Platform } from 'react-native'
import { useFonts, Kanit_400Regular, Kanit_500Medium, Kanit_700Bold } from '@expo-google-fonts/kanit';
import Colors from '../constants/Colors'

const Header = props => {

  useFonts({Kanit_400Regular, Kanit_500Medium, Kanit_700Bold})

  return (
    <View style={styles.headerContainer}>
      <View style={styles.logo}>
        <Text style={styles.headerText}>HEADER</Text>
      </View>
      <View>
        <Text style={{...styles.headerText, fontSize: 14 }}>LOGIN</Text>
      </View>
    </View>
  )
} 

const styles = StyleSheet.create({
  headerContainer: {
    padding: 15,
    paddingTop: Platform.OS === 'android' ? 40 : 15,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'space-between',
    height: Platform.OS === 'android' ? '12%' : '10%',
    borderBottomColor: Colors.borderGold,
    borderBottomWidth: 1,
    alignItems: 'center',
    flexDirection: 'row',
    fontSize: 16,
  },
  headerText: {
    fontSize: 16,
    color: Colors.primary,
    fontFamily: 'Kanit_500Medium',
  }
})

export default Header

【问题讨论】：

渲染发生在字体加载之前。在应用启动时加载字体link

标签： react-native fonts expo

【解决方案1】：

在我的情况下，问题是 package.json 中安装了 expo 版本的 expo-font 版本不兼容。

我从10.1.0 降级到10.0.4，现在字体加载正常。

记得使用expo install expo-font

希望对你有帮助

【讨论】：