时间戳

首页 > 解决方案 > 在 expo 项目中加载自定义字体时出错

reactjs - 在 expo 项目中加载自定义字体时出错

问题描述

我正在尝试在我的 expo 托管项目中加载字体，我遵循了https://docs.expo.io/versions/latest/sdk/font/中给出的示例，但它向我显示了这个错误“错误：应用程序（。 ..)：渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。”

这是我的 App.js 代码

import React from "react";
import { View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { useFonts } from "expo-font";
import { AppLoading } from "expo";

import LoginScreen from "./assets/Screens/LoginScreen";
import RegisterScreen from "./assets/Screens/RegisterScreen";

const Stack = createStackNavigator();

const App = () => {
  const [isFontLoaded] = useFonts({
    nimbusBold: require("./assets/fonts/NimbusMonoPS-Bold.otf"),
    nimbusRegular: require("./assets/fonts/NimbusMonoPS-Regular.otf"),
  });

  if (!isFontLoaded) {
    return AppLoading;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

有谁知道为什么会这样。感谢您宝贵的时间并提前回答。

标签： reactjsreact-nativeexpo

解决方案

这里的工作示例

首先，运行npm i expo-font

然后，运行npm i @expo-google-fonts/open-sans

然后，运行npm i expo-app-loading

然后在您的项目文件夹中创建一个名为hooks您所在位置的文件App.js。

在hooks文件夹中创建一个名为useFonts.js并在其中粘贴此代码的文件

import * as Font from 'expo-font';

const useFonts = async () => {
  await Font.loadAsync({
    Montserrat: require('../assets/fonts/Mulish.ttf'),
  });
};

export default useFonts;

你App.js应该看起来像这样

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppLoading from 'expo-app-loading'; // This is must

import useFonts from './hooks/useFonts';

import LoginScreen from './assets/screens/LoginScreen';
import RegisterScreen from './assets/screens/RegisterScreen';

const Stack = createStackNavigator();

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

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

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

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

你LoginScreen.js应该看起来像这样

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';

function LoginScreen(props) {
  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'Montserrat', fontSize: 30 }}>
        LoginScreen with fontFamily
      </Text>
      <Text style={{ fontSize: 30 }}>LoginScreen without fontFamily</Text>
    </View>
  );
}

export default LoginScreen;

const styles = StyleSheet.create({
  container: {},
});

这是加载字体的最佳方式，我在所有项目中都这样做。

推荐阅读