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”不是系统字体，具有没有通过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将始终返回true，它将在加载字体之前加载组件，从而导致错误。

在React Native中导入字体

1 个答案: