javascript — добавление семейства пользовательских шрифтов, чтобы реагировать на нативный текст

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

В настоящее время я пытаюсь добавить собственный шрифт в собственное приложение, но после того, как попробовал почти все ответы, которые я смог найти в 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(() ={amp}gt; { async function loadFont() { return await Font.loadAsync({ righteous: require('./assets/fonts/Righteous-Regular.ttf'), }); } loadFont(); }, []); return ( {amp}lt;View style={styles.container}{amp}gt; {amp}lt;Image style={styles.imager} source={imager} /{amp}gt; {amp}lt;Text style={{ fontSize: 30, fontWeight: 'bold', paddingTop: 30, fontFamily: 'righteous', }} {amp}gt; Request Ride {amp}lt;/Text{amp}gt; {amp}lt;Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}{amp}gt; Request a ride and get picked up by a nearby community driver {amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; ); } 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 в ./assets/fonts но когда я запускаю этот код, я получаю эту ошибку

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

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

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

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector