在 React Native 中导入字体

Question

我希望你能帮助我...我正在寻找关于它的不同讨论，但似乎没有任何对我有用...这真的很奇怪。我想自定义我的应用程序的字体。我选择 Parisienne 作为我标题的字体。我将他的字体下载到我的 "assets/font" 文件夹中。我的 App.js 在这里，但它不像 Expo 教程中那样工作... App.js 只是 DrawerNavigator 的门。

有人能帮助我吗？非常感谢！

import React, { Component } from "react";
import { View } from "react-native";
import styles from "./assets/Styles";
import DrawerNavigator from "./Drawer/DrawerNavigator";
import * as Font from "expo-font";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fontLoaded: false
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Parisienne: require("./assets/fonts/Parisienne/Parisienne.ttf")
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    if ((this.state.fontLoaded = true)) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }
}

DrawerNavigator.js :

import React from "react";
import {
  Image,
  Platform,
  Dimensions,
  StyleSheet,
  Text,
  View
} from "react-native";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import Actus from "../Components/Actus/Actus";
import Carte from "../Components/Carte/Carte";
import Reservation from "../Components/Reservation/Reservation";
import Restaurant from "../Components/Restaurant/Restaurant";
import Vins from "../Components/Vins/Vins";
import Acces from "../Components/Acces/Acces";
import Newsletter from "../Components/Newsletter/Newsletter";
import Welcome from "../Components/Welcome/Welcome";
// import Settings from "../Components/Settings/Settings"
import MenuDrawer from "./MenuDrawer"
import Slider from "../Components/Slider/Slider";

const WIDTH = Dimensions.get("window").width;

const DrawerConfig = {
  drawerWidth: WIDTH * 0.35,
  contentComponent: ({ navigation }) => {return (<MenuDrawer navigation = {navigation} />)}
};

const DrawerNavigator = createDrawerNavigator(
  {
    Welcome: {
      screen: Welcome
    },
    Actus: {
      screen: Actus
    },
    Carte: {
      screen: Carte
    },
    Reservation: {
      screen: Reservation
    },
    Restaurant: {
      screen: Restaurant
    },
    Vins: {
      screen: Vins
    },
    Acces: {
      screen: Acces
    },
    Newsletter: {
      screen: Newsletter
    },
    Slider: {
      screen: Slider
    }
  },
  DrawerConfig
);
export default createAppContainer(DrawerNavigator);

错误：

console.error : "fontFamily "Parisienne" is not a system font and has not been loaded through Font.loadAsync.

Answer 1

我刚看到你的渲染函数有很大的错误

  render() {
    //       here shouldn't be = true
    if ((this.state.fontLoaded = true)) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }

你应该把它改成

  render() {
    // correct way of checking bool value
    if (this.state.fontLoaded) {
      return <DrawerNavigator />;
    } else {
      return null;
    }
  }

这里的问题是this.state.fontLoaded = true总是returntrue并且它会在加载字体之前加载组件，导致错误。

在 React Native 中导入字体

Import a font in React Native

fonts

react-native

expo