在 React Native 中导入字体答案

【问题标题】：Import a font in React Native在 React Native 中导入字体
【发布时间】：2019-12-16 22:13:11
【问题描述】：

我希望你能帮助我...我正在寻找有关它的不同讨论，但似乎对我没有任何帮助...这真的很奇怪。我想自定义我的应用程序的字体。我选择 Parisienne 作为标题的字体。我将他的字体下载到我的“资产/字体”文件夹中。我的 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" 不是系统字体并且有没有通过 Font.loadAsync 加载。

【问题讨论】：

but It doesn't work as in Expo 什么不起作用？它给你一个错误？它不加载任何文本？不改字体？请更清楚您的问题。另外，请分享您的DrawerNavigator 组件
我根据您的评论编辑了我的消息。谢谢。
我不知道为什么，但有时它可以工作，应用程序中的字体正常，有时会出现错误，当我点击关闭应用程序时显示...
请检查我的答案，抱歉编辑你的答案错误，小错误

标签： react-native fonts expo

【解决方案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总是会返回true，并且会在加载字体之前加载组件，导致错误。

【讨论】：