似乎无法使用 Expo 的 Font.loadAsync 加载自定义字体答案

【问题标题】：Can't seem to load custom fonts with Expo's Font.loadAsync似乎无法使用 Expo 的 Font.loadAsync 加载自定义字体
【发布时间】：2019-03-25 19:59:14
【问题描述】：

我正在将 React Native 与 Expo 结合使用，除了自定义字体的这个问题外，一切都很顺利。我有我的字体Lobster-Regular.ttfin ./assets/fonts，我一直在尝试加载它，如官方文档中所示：

componentDidMount() {

    Font.loadAsync({

      'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
    });

  }

然后我将我的标题设置为：

  headerText: {
    color: 'white',
    fontSize: 30,
    fontFamily: 'Lobster'
  },

我得到的只是

fontFamily 'Lobster' 不是系统字体，尚未加载通过 Font.loadAsync。

如果您打算使用系统字体，请确保您输入的名称正确且受您的设备操作系统支持。

如果这是自定义字体，请务必使用 Font.loadAsync 加载它。

我错过了什么吗？

【问题讨论】：

标签： reactjs react-native fonts expo

【解决方案1】：

是的。你错过了电话是Font.loadAsync()。这意味着它异步加载。如：这需要一段时间。在字体加载之前，您无法渲染 UI。您需要按照以下方式做一些事情：

import { AppLoading, Font } from 'expo'

state = {
    fontsLoaded: false,
    ...
}

componentWillMount() {
    Font.loadAsync( {
            'Lobster': require('./assets/fonts/Lobster-Regular.ttf')
        }
    ).then( () => this.setState( { fontsLoaded: true } ) )
}

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

    return (
        ...
    )
}

【讨论】：

【解决方案2】：

** 无状态函数中的 react-native 字体 **

**step:1 从 expo 导入字体 **

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

*step2：需要文件中的字体*

// fetchFonts from local files type ttf 
const fetchFonts = () => {
  return Font.loadAsync({
  'PacificoRegular': require('../assets/Pacifico/Pacifico-Regular.ttf'),
  });
  };

*****step3:use state  *****

// state font fetch control 
const [fontloaded,setfontloaded]=useState(false);

**step4：使用加载的应用程序**

if(!fontloaded){
  return(
    <AppLoading
    startAsync={fetchFonts}
    onFinish={()=>{setfontloaded(true)}}
    onError={console.warn}/>
  )
}

**step5:style字体**

txt:{
padding:5,
fontSize:18,
fontFamily: 'PacificoRegular',
 }

【讨论】：

【解决方案3】：

从 expo CLI 安装 expo-font 包，因为有时 expo-font 版本与您的 expo 版本不兼容，所以，

第 1 步：

expo install expo-font

第 2 步：

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

  componentDidMount() {
    this.loadAssetsAsync();
  }

  async loadAssetsAsync() {
    await Font.loadAsync({
      // Load a font `Montserrat` from a static resource
      MuseoSans500: require("./assets/fonts/museosans_500-webfont.ttf"),
      MuseoSans700: require("./assets/fonts/museosans_700-webfont.ttf"),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    if (!this.state.fontLoaded) {
      return null; // render some progress indicator
    }
    return <AnyComponent />;
  }
}

【讨论】：

谢谢，这让我绞尽脑汁，结果我只需要运行该安装命令即可使用正确版本获取 Expo

【解决方案4】：

useEffect(()=>{
    async function loadFonts(){
      await Font.loadAsync({
        'Montserrat': require("./assets/fonts/Montserrat/Montserrat-Regular.ttf"),
        'Montserrat-SemiBold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
        'Montserrat-Bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
        'Fascinate': require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
      }).then(res=>{
        console.log("FONTS LOADED!");
        setLoaded(true)
      }).catch(Err=>{
        setLoaded(true);
        console.log(Err);
      }); 
    }

    loadFonts();
  },[])

在你的 App.js 文件中使用这个 useEffect 加载，一旦加载，字体就可以在你的 expo 或 react-native 项目中的任何地方使用

const Heading = (color) => {
    return({fontSize:45*fontScale, fontFamily: "Montserrat-SemiBold", color, marginTop: -10, marginLeft: InitialMargin, letterSpacing: 4})
}

确保您没有使用样式 fontWeight，因为它会覆盖 fontStyle 并且不会将 fontFamily 应用于您的文本。

【讨论】：

【解决方案5】：

Font.loadAsync 是旧的并且被证明存在不可预知的问题。现在世博会推出了新的解决方案here

所以现在正确的代码是：

import {useFonts} from 'expo-font';
import AppLoading from "expo-app-loading";

let [fontsLoaded] = useFonts({
      'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
    });
    if (!fontsLoaded) {
        return <AppLoading/>;
    }
...

【讨论】：