«TypeError: undefined не является объектом (оценивает _expo.default.Font ')]», сталкивающимся с этой ошибкой при асинхронной загрузке шрифта - PullRequest
Новая
       18

«TypeError: undefined не является объектом (оценивает _expo.default.Font ')]», сталкивающимся с этой ошибкой при асинхронной загрузке шрифта

1 голос
/ 04 июня 2019

Это моя ошибка:

[Отклонение необработанного обещания: Ошибка типа: undefined не является объектом (оценивает '_expo.default.Font')] * app \ views \ Login.js: 33: 15 в 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>
    );
  }
}

[Отклонение необработанного обещания: Ошибка типа: undefined не является объектом (оценивает '_expo.default.Font')] * app \ views \ Login.js: 33: 15 в componentWillMount $ - node_modules \ регенератор-время выполнения \ runtime.js: 45: 44 в tryCatch - node_modules \ регенератор-время выполнения \ runtime.js: 271: 30 в вызове - node_modules \ регенератор-время выполнения \ runtime.js: 45: 44 в tryCatch - node_modules \ регенератор-время выполнения \ runtime.js: 135: 28 в вызове - node_modules \ регенератор-время выполнения \ runtime.js: 170: 17 в - node_modules \ обещание \ setimmediate \ core.js: 45: 7 в tryCallTwo - node_modules \ обещание \ setimmediate \ core.js: 200: 23 в doResolve

Это ошибка, с которой я сталкиваюсь

1 Ответ

0 голосов
/ 05 июня 2019

Добро пожаловать на выставку!

У этого кода есть некоторые проблемы.

1, чтобы экспортировать класс, используйте «класс экспорта по умолчанию» вместо «экспортировать класс» 

export default

  1. В реагирующем языке вам не нужен конструктор.

  2. В реакции вы должны использовать функцию стрелки вместо анонимной функции, потому что функция стрелки - это средний класс! 

componentWillMount =  async() => {
  1. AppLoading не является компонентом пользовательского интерфейса. используйте 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>
    )
  }
}
...