React Native Expo не загружает шрифты

Question

React Native newb здесь!

Я пытаюсь использовать пользовательский шрифт в своем приложении native native, используя expo.Я безуспешно пытался следовать инструкциям на https://docs.expo.io/versions/latest/guides/using-custom-fonts.html#using-custom-fonts.

Вот мой App.js:

import React from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet, AsyncStorage, Alert, Platform, NativeModules } from 'react-native';
import { Expo } from 'expo';

import { StackNavigator } from 'react-navigation';
import LoginScreen from './src/views/LoginScreen';
import AuthenticatedScreen from './src/views/AuthenticatedScreen';

import './ReactotronConfig'

import styles from './src/styles/ParentStyles'

const { StatusBarManager } = NativeModules;

const RootStack = StackNavigator(
    {
        Login: { screen: LoginScreen },
        Authenticated: { screen: AuthenticatedScreen }
    },
    { initialRouteName: 'Login'}
);

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

export default class App extends React.Component {
    state = {
        fontLoaded: false,
    };

    async componentDidMount() {
        await Expo.Font.loadAsync({
            'open-sans-bold': require('./src/assets/fonts/OpenSans-Bold.ttf'),
        });
        console.log('running')
        this.setState({ fontLoaded: true });
    }

  render() {
    console.log('statusBarHeight: ' + StatusBarManager.HEIGHT);
    return (<RootStack />);
  }
}

console.disableYellowBox = true;

Я пытаюсь позвонить open-sans-bold на своей странице входавот так:

render() {
    return (
        <View style = { parentStyles.container } >
            <View style={ loginStyles.backgroundImageContainer }>
                <Image style={ loginStyles.backgroundImage } source={require('../assets/img/splash.png')} />
            </View>
            <View style={ loginStyles.logoImageContainer } >
                <Image style={ loginStyles.logoImage } source={require('../assets/img/PMlogo.png')} resizeMode="contain"/>
            </View>
            <View style={{flex: 50 }} >
                //***CALLING FONT HERE*** 
                <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>Email</Text>
                <TextInput style = {loginStyles.input}
                    underlineColorAndroid = "transparent"
                    placeholder = "Email"
                    placeholderTextColor = "red"
                    autoCapitalize = "none"
                    ref = { input => { this.textInputEmail = input }}
                    onChangeText = { this.handleEmail }/>

                <TextInput style = { loginStyles.input }
                    underlineColorAndroid = "transparent"
                    placeholder = "Password"
                    placeholderTextColor = "red"
                    autoCapitalize = "none"
                    ref = { input => { this.textInputPassword = input }}
                    onChangeText = { this.handlePassword }/>

                <TouchableOpacity
                    style = {loginStyles.submitButton}
                    onPress = { () => this.login(this.state.email, this.state.password) }
                    >
                    <Text style = { loginStyles.submitButtonText }> Login </Text>
                </TouchableOpacity>
            </View>
        </View>
    )

}

К сожалению, когда я запускаю это, я получаю следующую ошибку:

fontFamily 'open-sans-bold' is not a system font and has not been loaded through Expo.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.

- If this is a custom font, be sure to load it with Expo.Font.loadAsync.

Любая помощь очень ценится !!

Answer 1

Эй, братан, это корректно работает код для app.js, просто адаптируйся под свой случай

import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";

 export default class App extends React.Component {
     state = {
       loaded: false,
     };

     componentWillMount() {
       this._loadAssetsAsync();
     }

     _loadAssetsAsync = async () => {
       await Font.loadAsync({
         diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
       });
       this.setState({ loaded: true });
     };

     render() {
       if (!this.state.loaded) {
         return <AppLoading />;
       }

     return (
      <View style={styles.container}>
        <Text style={styles.info}>
          Look, you can load this font! Now the question is, should you use it?
          Probably not. But you can load any font.
        </Text>
      </View>
      );
     }
    }

  const styles = StyleSheet.create({
       container: {
         flex: 1,
         backgroundColor: "#fff",
         alignItems: "center",
         justifyContent: "center",
         padding: 30,
       },
       info: {
         fontFamily: "diplomata",
         textAlign: "center",
         fontSize: 14,
       },
   });