React Native Expo Google Fonts:不是系统字体,尚未通过Font.loadAsync加载

fnvucqvd  于 6个月前  发布在  React
关注(0)|答案(3)|浏览(85)

我正在使用Expo Google Fonts和useFonts()方法为我的应用程序导入字体。然而,我得到了以下错误,但我认为我不需要使用Font. loadFonts c与Google Fonts(根据docs 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

字符串


的数据

ff29svar

ff29svar1#

在我的例子中,问题是package.json中的expo-font版本与安装的expo版本不兼容。
我从10.1.0降级到10.0.4,字体现在加载正常。
使用expo install expo-font
我希望这能帮助

uajslkp6

uajslkp62#

在我的例子中,我安装了expo-fontyarn。为了解决这个问题,我安装了expo-font并使用命令npx expo install expo-font安装了expo-font,问题消失了
这种安装方法选择与您的expo版本兼容的expo-font。@Marco解决方案给了我这个线索。

ih99xse1

ih99xse13#

删除fontWeight属性并直接导入和使用字体就可以了。
修改自:

fontFamily: "Manrope",
fontSize: 20,
fontWeight: "600",
lineHeight: 26,
letterSpacing: -0.02,

字符串
收件人:

fontFamily: "Manrope_600SemiBold",
fontSize: 20,
lineHeight: 26,
letterSpacing: -0.02,


感谢Github上的回答。

// In your FontLoader.js file:
import { useFonts } from "expo-font";
import {
  Manrope_500Medium,
  Manrope_600SemiBold,
  Manrope_700Bold,
} from "@expo-google-fonts/manrope";

相关问题