fontFamily "FontAwesome5Free-Regular" 不是系統字體，沒有通過 Font.loadAsync 加載

Question

我正在開發一個牙科應用程序，其中幾乎每個屏幕都有圖標。 但是，突然間所有的圖標都不可見，只顯示一個帶問號的框。 圖標組不斷拋出錯誤。 我根據 expo 圖標文檔更改了圖標的導入方式，但仍然無法正常工作。 這是我得到的錯誤：

我使用圖標的屏幕之一的代碼：

import React, { Component } from "react";
import * as db from '../Config/Firebase';
import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  FlatList,
} from "react-native";
import AntDesign from '@expo/vector-icons/AntDesign'
import Ionicons from '@expo/vector-icons/Ionicons'
import { ListItem, Avatar, Badge } from "react-native-elements";
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
import theme from "../Props/theme";
import Constants from "expo-constants";

export default class Pending extends Component {
  constructor() {
    super();

    this.state = {
      patients: [],
    };

    this.patient = null;
  }

  componentDidMount = async () => {
    this.patient = await firebase
      .firestore()
      .collection(firebase.auth().currentUser.email)
      .where("doctorEmail", "==", auth.currentUser.email)
      .where("allVisitsCompleted", "==", false)
      .onSnapshot((snapshot) => {
        var docData = snapshot.docs.map((document) => document.data());
        this.setState({
          patients: docData,
        });
      });
  };

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#FFF" }}>
        <StatusBar hidden />

        {this.state.patients.length !== 0 ? (
          <View>
            <FlatList
              data={this.state.patients}
              style={{ marginTop: 20 }}
              renderItem={({ item }) => (
                <ListItem>
                  <ListItem.Content
                    style={{
                      backgroundColor: "#f0f0f0",
                      padding: 20,
                      borderRadius: 20,
                    }}
                  >
                    <View style={{ flexDirection: "row" }}>
                      <View>
                        <Avatar
                          rounded
                          icon={{ name: "user", type: "font-awesome" }}
                          activeOpacity={0.7}
                          source={{
                            uri: "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
                          }}
                        />
                        <Badge
                          containerStyle={{
                            position: "absolute",
                            top: -1,
                            right: -3,
                          }}
                          badgeStyle={{
                            width: 15,
                            height: 15,
                            borderRadius: 7.5,
                            backgroundColor: theme.darkPink,
                          }}
                        />
                      </View>
                      <View style={{ flexDirection: "column", marginLeft: 20 }}>
                        <ListItem.Title>{item.patientName}</ListItem.Title>
                        <ListItem.Subtitle>{item.patientId}</ListItem.Subtitle>
                      </View>
                    </View>
                  </ListItem.Content>
                </ListItem>
              )}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>
        ) : (
          <View>
            <Text
              style={{
                marginTop: Constants.statusBarHeight + 250,
                fontSize: 35,
                fontWeight: "200",
                alignSelf: "center",
              }}
            >
              No patients found
            </Text>

            <View style={{ marginVertical: 48, alignItems: "center" }}>
              <TouchableOpacity
                style={{
                  borderWidth: 2,
                  borderColor: theme.blue,
                  borderRadius: 4,
                  padding: 15,
                  alignItems: "center",
                  justifyContent: "center",
                }}
                onPress={() => this.props.navigation.navigate("Add")}
              >
                <AntDesign name="plus" size={16} color={theme.darkBlue} />
              </TouchableOpacity>

              <Text
                style={{
                  color: theme.darkBlue,
                  fontWeight: "600",
                  fontSize: 14,
                  marginTop: 8,
                }}
              >
                Add patient
              </Text>
            </View>
          </View>
        )}
      </View>
    );
  }
}

關於如何解決這個問題的任何想法？ 提前致謝！

Answer 1

這與 Expo 有關，這是一個已知問題。

您要么必須手動加載字體，請參閱this 。

或者為你的圖標使用一個庫， VectorIcons有所有的 fontawesome 圖標。