"TypeError: undefined is not an object (evaluating '_expo.default.Font')]" facing this error when asynchronously loading the font

Question

这是我的错误：

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$

最初我收到如下错误：

fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync. If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

所以我使用加载异步加载字体，但开始出现上述错误。

import React, { Component } from "react";
import { Alert, AsyncStorage, StyleSheet, Text } from "react-native";
import {Container,Header,Content,Card,CardItem,Body,Form,Input,Button,Item
} from "native-base";
import { AppHeader } from "../sections/Header";
import Expo from "expo";
import {Font} from 'expo';
export class Login extends Component {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      isReady: false
    };
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <AppHeader />
      </Container>
    );
  }
}

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$ - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:271:30 in invoke - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:135:28 in invoke - node_modules\regenerator-runtime\runtime.js:170:17 in - node_modules\promise\setimmediate\core.js:45:7 in tryCallTwo - node_modules\promise\setimmediate\core.js:200:23 in doResolve

这是我面临的错误

Answer 1

欢迎来到世博会！

这段代码有一些问题。

1，要导出 class 使用“export default Class”而不是“export Class”

export default

在react-native中，你不需要构造函数。
在react中，你应该使用箭头函数而不是匿名函数，因为箭头函数的意思是class!

componentWillMount =  async() => {

AppLoading 不是 UI 组件。使用 ActivityIndicator。

if (!this.state.isReady) {
  return <ActivityIndicator />
}

下面的代码运行良好。试试吧！

import React, { Component } from 'react'
import { ActivityIndicator } from 'react-native'
import { Container } from 'native-base'
import { AppHeader } from '../sections/Header'
import { Font } from 'expo'

export default class Login extends Component {
  static navigationOptions = {
    header: null
  }

  state = {
    isReady: false
  }

  componentWillMount = async() => {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    })
    this.setState({ isReady: true })
  }

  render () {
    if (!this.state.isReady) {
      return <ActivityIndicator />
    }
    return (
      <View>
        <AppHeader />
      </View>
    )
  }
}

Answer 2

在较新版本的 Expo 中也使用 import * as Font from 'expo-font'，而不是从 'expo' 中导入它。

"TypeError: undefined is not an object (evaluating '_expo.default.Font')]" facing this error when asynchronously loading the font

"TypeError: undefined is not an object (evaluating '_expo.default.Font')]" facing this error when asynchronously loading the font

javascript

react-native

native-base

expo