在React Native Expo项目中设置默认字体系列

Question

我正在尝试在RN Expo项目中设置默认字体（Lato-Regular）。

我正在使用setCustomText来实现这一目标。 https://github.com/Ajackster/react-native-global-props

这种方法在非魅力项目中运行时就像魅力一样，但现在我正在将我的项目转移到Expo，并且似乎有一个应用程序的默认字体问题。

import React, { Component } from 'react'
import { Styles } from 'react-native'
import { Root } from './src/config/router'
import {
  setCustomText
} from 'react-native-global-props'

import { Font } from 'expo'

class App extends Component {
  constructor() {
    super()
    this.state = {
      currentTab: null,
      fontLoaded: false
    }
  }

  getCurrentRouteName(navigationState) {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index]
    if (route.routes) {
      return this.getCurrentRouteName(route)
    }
    return route.routeName;
  }

  componentDidMount() {
     Font.loadAsync({
       'Lato-Regular': require('./src/assets/fonts/Lato-Regular.ttf')
     });
     this.setState({
       fontLoaded: true
     }, 
     () => this.defaultFonts());

}

  defaultFonts(){
    const customTextProps = {
      style: {
        fontFamily: 'Lato-Regular'
      }
    }
    setCustomText(customTextProps)
  }

  render() {
    console.log( this);
    return (
      this.state.fontLoaded ?
      <Root
      screenProps={{currentScreen: this.state.currentTab}}
      /> : null
  )
  }
}

export default App

但是我收到了这个错误：

可能是什么问题

Answer 1

这里您没有等待加载字体，请求字体后立即调用setState。您必须等待Font.loadAsync承诺得到解决。

componentDidMount() {
  Font.loadAsync({
    'Lato-Regular': require('./src/assets/fonts/Lato-Regular.ttf')
  })
    .then(() => {
       this.setState({ fontLoaded: true });
       this.defaultFonts();
    });
}

您还可以使用async/await语法。

async componentDidMount() {
  await Font.loadAsync({
    'Lato-Regular': require('./src/assets/fonts/Lato-Regular.ttf')
  })
  this.setState({ fontLoaded: true });
  this.defaultFonts();
}