Добавление пользовательского семейства шрифтов для реагирования на собственный текст не работает

Question

В настоящее время я пытаюсь добавить собственный шрифт в собственное приложение реагировать, но после того, как попробовал почти все ответы, которые я смог найти в SO и в Google, он все еще не работает.

Я попытался отреагироватьнативно распознает шрифт, добавив

"rnpm": {
"assets": [
  "./assets/fonts/"
]

},

к package.json и затем запустив react-native link, а также используя запятую re-run. Но все равно не работает.

Ниже приведен код

app.js

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';

export default function App() {
  useEffect(() => {
    async function loadFont() {
      return await Font.loadAsync({
        righteous: require('./assets/fonts/Righteous-Regular.ttf'),
      });
    }
    loadFont();
  }, []);

  return (
    <View style={styles.container}>
      <Image style={styles.imager} source={imager} />
      <Text
        style={{
          fontSize: 30,
          fontWeight: 'bold',
          paddingTop: 30,
          fontFamily: 'righteous',
        }}
      >
        Request Ride
      </Text>
      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
        Request a ride and get picked up by a nearby community driver
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imager: {
    width: 200,
    height: 200,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowRadius: 10,
    shadowOpacity: 1,
  },
 });

У меня есть шрифт Righteous-Regular.ttf in ./assets/fonts но когда я запускаю этот код, я получаю эту ошибку

fontFamily "Rightteous" не является системным шрифтом и не был загружен через Font.loadAsync.

• Если вы намеревались использовать системный шрифт, убедитесь, что вы правильно ввели имя и что оно поддерживается операционной системой вашего устройства.

• Если это нестандартный шрифт,Обязательно загрузите его с помощью Font.loadAsync.

Я исследовал, но все еще не могу найти решение этой проблемы. Пожалуйста, в чем может быть проблема и как я могу это сделать?

Answer 1

Вы пытаетесь использовать шрифт до его загрузки. Вам нужно сделать что-то вроде этого.

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';

export default function App() {
  // use state for font status.
  const [isFontReady, setFontReady] = useState(false)

  useEffect(() => {
    async function loadFont() {
      return await Font.loadAsync({
        righteous: require('./assets/fonts/Righteous-Regular.ttf'),
      });
    }
    // after the loading set the font status to true
    loadFont().then(() => {
      setFontReady(true)
    });
  }, []);

  return (
    <View style={styles.container}>
      <Image style={styles.imager} source={imager} />
      {/* render the text after loading */}
      {isFontReady && <Text
        style={{
          fontSize: 30,
          fontWeight: 'bold',
          paddingTop: 30,
          fontFamily: 'righteous',
        }}
      >
        Request Ride
      </Text>}
      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
        Request a ride and get picked up by a nearby community driver
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imager: {
    width: 200,
    height: 200,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowRadius: 10,
    shadowOpacity: 1,
  },
 });

Вы должны отобразить элемент после установки шрифта или отобразить его другим шрифтом до этого.

Answer 2

Используете ли вы размер реакции больше или равен 0,60? То, что вы сделали, сработало в моем проекте, но мой проект ниже реактивного 0,60. Выше 0,60, по-видимому, вы должны изменить response-native.config.js вместо изменения package.json. Вот ссылка на учебник, который преодолевает эту разницу. Он находится в третьей части учебника: https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4