1

这是我的文件结构

这是我的文件结构

在 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 />
    );
  }
}

我正在尝试在 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>
    );
  }
}

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

我的结果

我的结果

没有我的自定义字体现在的样子

没有我的自定义字体现在的样子

4

1 回答 1

0

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

render() {
  return this.state.fontLoaded && <Index />;
}
于 2018-02-21T05:08:44.060 回答