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

Question

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

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

这种方法在运行在非 expo 项目中很有效，但现在我将我的项目移至 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 Promise 得到解决。

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();
}

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

Set default font family in React Native Expo project

fonts

reactjs

react-router

react-native

react-navigation