“TypeError: undefined is not an object (evaluating '_expo.default.Font')]” 在异步加载字体时面临这个错误

Question

这是我的错误：

[未处理的承诺拒绝：TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$

最初我收到如下错误：

fontFamily "Roboto_medium" 不是系统字体，还没有通过 Font.loadAsync 加载。如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持它。

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

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

[未处理的承诺拒绝：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 在 tryCatch - node_modules\regenerator-runtime\runtime.js:271:30 在 invoke - node_modules\regenerator-runtime\runtime.js:45:44 在 tryCatch - node_modules\regenerator-runtime\runtime.js:135:28在 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、导出类使用“导出默认类”而不是“导出类”

export default

2. 在 react-native 中，您不需要构造函数。

3. 在反应中，你应该使用箭头函数而不是匿名函数，因为箭头函数是这个意思类！

componentWillMount =  async() => {

4. AppLoading 不是 UI 组件。使用活动指示器。

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

还可以import * as Font from 'expo-font'在较新版本的 Expo 中使用，而不是从“expo”导入。