React Native 错误检查 App 的渲染方法

Question

我正在制作一个反应原生应用程序，现在正试图放置一个下载的字体，我一直在检查应用程序错误的渲染方法，然后在它下面，它说这个

此错误位于： 在 App 中（由 ExpoRoot 创建） 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:106） 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:132） 在 AppContainer 中（在 renderApplication.js:39 处）

我看过类似的问题，但他们的解决方案没有解决我的问题，所以我从他们的解决方案中得知这是导入或导出错误，但我的所有东西都正确导入和导出，所以我不知道是什么问题不再是了。这就是我当前的代码的样子

    import React, {useState} from 'react';
import { View } from 'react-native';
import * as Font from 'expo-font';
import Home from './screens/Home';
import AppLoading from 'expo';

const getFonts = () => 
   Font.loadAsync({
    "Alef-Bold": require("./assets/fonts/Alef-Bold.ttf")
  })


export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded){
    return (
      <View>
        <Home />
      </View>
    );
  } else {
    return (
      <AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
    )
  }
}

这是 Home 组件

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

function Home() {
    return (
        <View style={styles.container}>
            <Text style={styles.titleText}>Welcome to the home page</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 50,
    },
    titleText: {
        fontFamily: "Alef-Bold",
    }
})

export default Home

请问我该如何解决呢？

Answer 1

您加载字体的方式是错误的，您的导入也是如此。要更正此问题，只需按照以下步骤操作

Click here to see Working Example

首先像这样安装AppLoading

expo install expo-app-loading

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

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

useFonts.js

import * as Font from 'expo-font';

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

export default useFonts;

然后在您的App.js 中粘贴此代码

import React, { useState } from 'react';
import { View } from 'react-native';
import AppLoading from 'expo-app-loading';

import Home from './screens/Home';
import useFonts from './hooks/useFonts';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  const LoadFonts = async () => {
    await useFonts(); // We have to await this call here
  };

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(error) => console.log(error)}
      />
    );
  }

  return (
    <View>
      <Home />
    </View>
  );
}

你的Home.js 应该是这样的

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

function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Welcome to the home page</Text>
      <Text style={styles.normalText}>This text is in normal font</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 50,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    color: 'red',
  },
  titleText: {
    fontFamily: 'Alef-Bold',
    fontSize: 30,
  },
  normalText: {
    fontSize: 30,
  },
});

export default Home;

通过这种加载字体的方式，您的App.js 将变得整洁干净。我在所有项目中都使用这种方式