如何使用CRNA和Expo加载自定义字体

This is my File Structure

这是我的文件结构

in App.js

在App.js中

import React, { Component } from 'react';
import { Font } from 'expo';

import Index from './src/index';

export default class App extends Component {
  //checking state for if font is loaded or not.
  state = {
    fontLoaded: false,
  };
   async componentDidMount() {
    await Font.loadAsync({
      'Roboto_medium': require('./src/assets/fonts/Roboto-Medium.ttf'),
      'chunky': require('./src/assets/fonts/chunkfive.ttf'),
    });
    //Setting the state to true when font is loaded.
    this.setState({ fontLoaded: true });
  }
  render() {
    return (
      <Index />
    );
  }
}

I'm trying to load my font inside of src/screens/home.js

我正在尝试在src / screens / home.js中加载我的字体

import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Text } from 'native-base';

// Style Sheet
import styles from '../styles/home';

export default class HomeScreen extends Component {

  static navigationOptions = {
    title: 'Davis',
    headerStyle: { backgroundColor: '#177293' },                // The chunky font is not loading from my App.js do I need to import something??
    headerTitleStyle: { color: '#ffffff', alignSelf: 'center', fontFamily: 'chunky' },
  }

  render() {
    return (
      <Container>
        <Content>
          <List>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("About")}>
              <Text  style={styles.text}>About</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Estimate")}>
              <Text style={styles.text}>Request an Estimate</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Tracker")}>
              <Text style={styles.text}>Live Delivery Tracker</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Contact")}>
              <Text style={styles.text}>Contact Us</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Testimonials")}>
              <Text style={styles.text}>Testimonials</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Login")}>
              <Text style={styles.text}>Login</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Details")}>
              <Text style={styles.text}>Job Details</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Requests")}>
              <Text style={styles.text}>Requests</Text>
            </ListItem>
            <ListItem style={[styles.list, styles.listColor]} onPress={() => this.props.navigation.navigate("Terms")}>
              <Text style={styles.text}>Terms and Conditions</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

I want to add my custom font into the title of my header. I'm not sure if I need to import it into my home.js like import { chunky } from '../app'; also when I've tried to import it ".../app" doesn't work I thought the first period was to step out of the current file the second one would be to go up to src I just assumed that adding a third period would take me to the root folder and into app... holy crap I just realized capitalization probably matters in the import so not ".../app" but ".../App" for the App.js file in my root folder.

我想将自定义字体添加到标题的标题中。我不确定我是否需要将它导入我的home.js，例如来自'../app'的import {chunky};当我试图导入它“... / app”不起作用我认为第一个时期是走出当前文件第二个将是去src我只是假设添加第三个期间会把我带到根文件夹并进入应用程序...神圣的废话我刚刚意识到大写可能在导入中很重要所以不是“... / app”而是“... / App”对于我的App.js文件根文件夹。

My Results

我的结果

What it looks like now without my custom font

现在看起来没有我的自定义字体

1 个解决方案

#1

That error is occured because your screen is using the font before it got loaded. So you have to wait your font to be loaded first before rendering the screen.

发生该错误是因为您的屏幕在加载之前使用了该字体。因此，在渲染屏幕之前，必须先等待字体加载。

render() {
  return this.state.fontLoaded && <Index />;
}