React Native / Expo - Пользовательский шрифт не работает

Question

Я пытаюсь использовать шрифт Lobster в своем проекте, поэтому я:

1. Добавлен файл .ttf, загруженный из шрифтов Google в папку / assets / fonts

2. Создано act-native.config. js:

   module.exports = {project: {ios: {}, android: {} ,}, assets: ['./assets/fonts/'],};

3. Выполнить команду response-native link - получено "success Активы успешно связаны с вашим проектом"

4. У моего объекта стиля - fontFamily: 'Lobster-Regular'

Но все равно не работает

Answer 1

Иногда имя файла шрифта не совпадает с реальным именем шрифта, используемым в приложении check XCode info.plist

Answer 2

Если вы используете expo, после этих шагов это должно работать:

шаг 1: поместите файл Lobster-Regular.ttf внутрь ./assets/fonts

шаг 2: Ваш файл должно быть похоже на это:

import React, { Component } from 'react'
import { Text, View} from 'react-native'
import * as Font from 'expo-font';

export default class App extends Component {

constructor(){
    super();
    this.state = {
        fontLoaded: false
    };
}

async componentDidMount(){
   await Font.loadAsync({
        'Lobster-Regular': require('./assets/fonts/Lobster-Regular.ttf'),
    });

    this.setState({ fontLoaded: true});
}

    render() {
        return (
            <View>
                {this.state.fontLoaded ? 
                <Text style={{fontFamily: 'Lobster-Regular'}}>hello everyone</Text>
                : <Text>not loaded</Text>
                }
            </View>
        )
    }
}

Если вы используете чистый реагирующий натив и связь не работает, возможно, вам следует сделать это вручную.

Для android:

В структуре папок android / app / src / main вы создадите папку assets с папкой fonts внутри. В папке шрифтов вы разместите здесь файлы шрифтов.

Для iOS шаги немного дольше, вы можете следовать этому блогу