对检查应用程序的呈现方法的本机错误做出反应

Question

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

此错误位于：在应用（由 ExpoRoot 创建）在 ExpoRoot 中（在渲染html" target="_blank">应用程序.js：45）在 RCTView（在视图.js：34）在视图（在应用程序容器.js：106）在 RCTView（在视图.js：34）在视图（在应用程序容器.js：132）在应用程序容器（在呈现应用程序.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 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

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

点击此处查看工作示例

首先像这样安装AppLoding

expo install expo-app-loading

在App.js所在的位置创建一个名为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;

然后在您的应用中.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>
  );
}

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