Question

我正在尝试在我的应用程序中使用 google 字体，当我尝试将其用作 IBMPlexSans 字体时，出现此错误... '未捕获的错误：元素类型无效：应为字符串（对于嵌入式组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。谁能帮我一把？

import React, { Component } from 'react'
import { AppLoading } from 'expo'
import {
  useFonts,
  IBMPlexSans_100Thin,
  IBMPlexSans_100Thin_Italic,
  IBMPlexSans_200ExtraLight,
  IBMPlexSans_200ExtraLight_Italic,
  IBMPlexSans_300Light,
  IBMPlexSans_300Light_Italic,
  IBMPlexSans_400Regular,
  IBMPlexSans_400Regular_Italic,
  IBMPlexSans_500Medium,
  IBMPlexSans_500Medium_Italic,
  IBMPlexSans_600SemiBold,
  IBMPlexSans_600SemiBold_Italic,
  IBMPlexSans_700Bold,
  IBMPlexSans_700Bold_Italic,
} from '@expo-google-fonts/ibm-plex-sans';

import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Dimensions, ImageBackground } from 'react-native';




export default function RegisterScreen (props) {

    let [fontsLoaded] = useFonts({
        IBMPlexSans_100Thin,
        IBMPlexSans_100Thin_Italic,
        IBMPlexSans_200ExtraLight,
        IBMPlexSans_200ExtraLight_Italic,
        IBMPlexSans_300Light,
        IBMPlexSans_300Light_Italic,
        IBMPlexSans_400Regular,
        IBMPlexSans_400Regular_Italic,
        IBMPlexSans_500Medium,
        IBMPlexSans_500Medium_Italic,
        IBMPlexSans_600SemiBold,
        IBMPlexSans_600SemiBold_Italic,
        IBMPlexSans_700Bold,
        IBMPlexSans_700Bold_Italic,
      });
     
      if (!fontsLoaded) {
        return <AppLoading />;
      }

    return (

        <View>
           <Text style={{ fontFamily: 'IBMPlexSans_100Thin' }}>Text Example</Text>
        </View>
    )

}

Answer 1

Working Example

首先，像这样安装expo-app-loading

npm install expo-app-loading

然后安装expo-font

npm install expo-font

在您的 hooks 所在的位置创建一个名为 App.js 的文件夹

在 hooks 文件夹中创建一个名为 useFonts.js 的文件

那么您的 useFonts.js 应该如下所示

import * as Font from 'expo-font';
import {
  IBMPlexSans_100Thin,
  IBMPlexSans_100Thin_Italic,
  IBMPlexSans_200ExtraLight,
  IBMPlexSans_200ExtraLight_Italic,
  IBMPlexSans_300Light,
  IBMPlexSans_300Light_Italic,
  IBMPlexSans_400Regular,
  IBMPlexSans_400Regular_Italic,
  IBMPlexSans_500Medium,
  IBMPlexSans_500Medium_Italic,
  IBMPlexSans_600SemiBold,
  IBMPlexSans_600SemiBold_Italic,
  IBMPlexSans_700Bold,
  IBMPlexSans_700Bold_Italic,
} from '@expo-google-fonts/ibm-plex-sans';

const useFonts = async () => {
  await Font.loadAsync({
    IBMPlexSans_100Thin,
    IBMPlexSans_100Thin_Italic,
    IBMPlexSans_200ExtraLight,
    IBMPlexSans_200ExtraLight_Italic,
    IBMPlexSans_300Light,
    IBMPlexSans_300Light_Italic,
    IBMPlexSans_400Regular,
    IBMPlexSans_400Regular_Italic,
    IBMPlexSans_500Medium,
    IBMPlexSans_500Medium_Italic,
    IBMPlexSans_600SemiBold,
    IBMPlexSans_600SemiBold_Italic,
    IBMPlexSans_700Bold,
    IBMPlexSans_700Bold_Italic,
  });
};

export default useFonts;

你的 App.js 应该是这样的

import React, { Component, useState } from 'react';
import AppLoading from 'expo-app-loading';

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  ImageBackground,
} from 'react-native';

import useFonts from './hooks/useFonts';

export default function RegisterScreen(props) {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFontsAndRestoreToken = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFontsAndRestoreToken}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <View>
      <Text style={{ fontFamily: 'IBMPlexSans_100Thin' }}>Text Example</Text>
      <Text>Normal Text</Text>
    </View>
  );
}

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

1 个答案: