React native错误检查App的render方法

Question

我正在制作一个 React 本机应用程序，现在正尝试放置一个下载的字体，我一直收到这个检查应用程序错误的渲染方法，然后在它下面，它说这个

This error is located at: in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

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

    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)} />
    )
  }
}

这是主页组件

    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 将会整洁干净。我在我的所有项目中都使用这种方式

React native错误检查App的render方法

React native error of Check the render method of App

fonts

function

reactjs

react-native

expo