Экспо Шрифты загружаются неправильно - PullRequest
Новая
       5

Экспо Шрифты загружаются неправильно

0 голосов
/ 21 апреля 2020

Я использую шрифты expo для загрузки шрифтов, и я обнаружил новую ошибку: «Вы начали загружать шрифт, но использовали его до того, как он закончил загрузку». Я не уверен, откуда проблема. Я попытался загрузить шрифт в приложение: 

import * as Font from "expo-font";
export default class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      "open-sans-bold": require("./assets/Fonts/OpenSans-Bold.ttf")
    });
  }



  render() {
    return (
      <Provider store={store}>

          <View style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <AppContainer />
          </View>

      </Provider>
    );
  }
}

Однако ошибка сохраняется

1 Ответ

0 голосов
/ 23 апреля 2020

Ошибка появляется, потому что вы визуализируете свое приложение перед загрузкой шрифта. Вам нужно сделать еще один <View>, прежде чем он закончится. Вы можете изменить свой код следующим образом: 

import React from 'react-native';
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native';

import * as Font from 'expo-font';
export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            fontLoaded: false   
        };
    }

    async componentDidMount() {
        await Font.loadAsync({
            'open-sans-bold': require('./assets/Fonts/OpenSans-Bold.ttf')
        }).then(() => {
            // When the font is loaded you can rendered your app
            this.setState({
                fontLoaded: true
            });
        });
    }

    render() {
        const { fontLoaded } = this.state;

        // When your font is not loaded you display a Loading Component
        if (!fontLoaded) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" color="#0000ff" />;
                </View>
            );
        } else {
            return (
                <Provider store={store}>
                    <View style={styles.container}>
                        <StatusBar barStyle="dark-content" />
                        <AppContainer />
                    </View>
                </Provider>
            );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignIems: 'center'
    }
});
...