Reactjs 检查应用程序的渲染方法时出现反应本机错误

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

此错误位于： 应用内（由Expoot创建） 在expoot中（在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)} />
    )
  }
}

import React，{useState}来自“React”；
从“react native”导入{View}；
从“expo字体”导入*作为字体；
从“/screens/Home”导入主页；
从“expo”导入应用程序；
常量getFonts=（）=>
Font.loadAsync({
“Alef Bold”：要求（“./assets/font/Alef Bold.ttf”）
})
导出默认函数App（）{
const[fontsLoaded，setFontsLoaded]=useState（false）；
if（fontsLoaded）{
返回(
);
}否则{
返回(
setFontsLoaded（真）}/>
)
}
}

这是主组件

    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

从“React”导入React
从“react native”导入{样式表、文本、视图}
函数Home（）{
返回(
欢迎来到主页
)
}
const styles=StyleSheet.create({
容器：{
填充：50，
},
标题文字：{
fontFamily：“Alef Bold”，
}
})
导出默认主页

---

那么我该如何解决这个问题呢？

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

首先像这样安装AppLoading

expo install expo-app-loading

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

所在的位置创建一个名为

hooks

的文件夹

在

hooks

文件夹中创建一个名为

useFonts.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 () => {
    useFonts();
  };

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

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

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 () => {
    useFonts();
  };

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

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

---

通过采用这种加载字体的方式，您的

App.js

将整洁干净。我在我所有的项目中都使用这种方式

您能发布您得到的确切错误吗？这是第一个错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查

App

的渲染方法。我没有足够的字符来输出其余的错误，因此我更新了问题您的

应用程序加载

导入错误，您必须像这样从“expo app loading”导入

应用程序加载@KartikeyVaish此错误导致此错误未定义无法从C:\Users\lenovo\Desktop\projekten\gamezone\app.js解析模块expo应用程序加载：在项目中找不到expo应用程序加载。如果确定模块存在，请尝试以下步骤：1。清除看守人手表：看守人手表删除所有2。删除节点_模块并运行安装3。重置高速缓存：纱线开始——重置高速缓存4。删除缓存：rm-rf/tmp/metro-*3 |从“expo Font”中导入*为字体；4 |从“./screens/Home”导入主页“；>5 |从“expo-app-loading”导入应用程序加载您必须按如下方式安装应用程序加载
expo安装expo-app-loading
查看我的答案Hey man现在我收到此错误。这些文件均不存在：*hooks\useFonts\index（.native |.android.ts |.native.ts |.ts |.android.tsx |.native.tsx |.android.js |.native.js |.android.jsx |.native.jsx |.jsx |.android.json |.native.json |.json）3 |从“expo app loading”导入应用程序加载；4 |从“/screens/Home”导入主页；>5 |从“/hooks/useFonts”导入useFonts；这很奇怪，因为我创建了hooks文件夹和useFonts文件，并将您的代码完全按照您编写的方式放入其中，检查所有文件夹以及文件名是否正确重新确认hooks文件夹是在你的
App.js
所在的位置创建的。检查你的Home组件的文件名是
Home.js
还是
HomeScreen.js
检查链接上的工作实现，我非常感谢兄弟，非常感谢它现在正在工作，但还有一个问题，当我添加了另一种字体，它会抛出这个错误“Airstream”不是系统字体，也未通过font.loadAsync加载。-如果要使用系统字体，请确保键入的名称正确且设备操作系统支持。-如果这是自定义字体，请确保使用font.loadAsync加载。这是更新版本你可以查看我保存的世博会，你必须在fonts文件夹中上传
Airstream.ttf
，然后它才能工作