خطأ عند استيراد نوع الخط في react-native

عبد النور محمد · 2 يوليو 2021

مرحبا لدي الشيفرة التالية

import React, { Component, useEffect, useState } from 'react';
import { AppLoading, Font, Permissions } from 'expo';
import AppNavigation from './config/route';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentWillMount() {
    await Permissions.askAsync(Permissions.LOCATION);
  }

  async _getFonts() {
    await Font.loadAsync({
      'noto-font': require('./assets/fonts/NotoKufiArabic-Regular.ttf'),
    });
  }

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading startAsync={this._getFonts} onFinish={() => this.setState({ isReady: true })} />
      );
    }
    return <AppNavigation />;
  }
}

ويحدث معي هذا الخطأ عند تشغيل المشروع

fontFamily "space-mono" 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.

Yomna Raouf · 2 يوليو 2021

رسالة الخطأ تخبرك أن الخط "space-mono" غير موجود ضمن الخطوط الخاصة بنظام التشغيل الخاص بك و كذلك لم يتم تضمينها باستخدام Font.loadAsync كما فعلت مع الخط 'noto-font'، لذلك لا يمكنك استخدامه في المشروع.

أرجو منك تضمين الخط أو التحقق من أنك قمت بتضمينه بشكل صحيح في المكون الذي تم استخدام الخط فيه.

إذا لم تكن قمت باستخدام الخط من الأساس، أرجو منك اتباع الخطوات التالية:

نقوم بحذف ملف package-lock.json و/أو yarn.lock و مجلد node_modules
و بعدها تنفيذ الأمر
```
npm install
```
أو
```
yarn install
```
إذا لم تنجح أرجو منك تحديث نسخة expo و باقي ال packages و تتأكد من توافقها

Salah Eddin Beriani2 · 2 يوليو 2021

اذا تحققت من أن الخط موجود في مشروعك فيبقى عليك ان تتحقق من نسخة expo لأنه في النسخ الحديثة Font لم يعد يستورد من expo بدلا من ذلك أخرجوه لمكتبة خاصة به لذا أنصح بتثبت expo-font عن طريق expo وليس npm ثم استيراد Font من هناك

expo install expo-font

import * as Font from 'expo-font';

اذا نجح الأمر فسيتحتم عليك فعل نفس الأمر ل Permissions و AppLoading بعد تثبيت مكتباتهما

import * as Permissions from 'expo-permissions';

import AppLoading from 'expo-app-loading';

خطأ عند استيراد نوع الخط في react-native

السؤال

عبد النور محمد

2 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

Salah Eddin Beriani2

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية