使用自定义字体
iOS和Android都有自己的平台字体集，但如果你想在你的应用中注入更多的品牌个性，那么选择好的字体可能会有很长的路要走。在本指南中，我们将引导您向Expo应用添加自定义字体。我们将在示例中使用来自Google Fonts的Open Sans，并且该过程与任何其他字体相同，因此请随意根据您的使用情况进行调整。在继续之前，请继续下载Open Sans
开始代码
首先让我们从一个基本的“Hello world！”开始吧。应用程序。创建一个新项目，expo init并更改App.js为以下内容：
importReactfrom'react';import{Text,View,}from'react-native';exportdefaultclassAppextendsReact.Component{render(){return(<View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text style={{fontSize:56}}>Hello,world!</Text></View>);}}
尝试在使用Open Sans之前运行此基本应用程序，这样您就可以解决任何基本的设置问题。
下载字体
获取您下载的Open Sans zip文件，将其解压缩并复制OpenSans-Bold.ttf到项目的assets目录中。我们推荐的位置是your-project/assets/fonts。
在您的应用中加载字体
要加载和使用字体，我们将使用Expo SDK，它是在您创建新的Expo项目时预先安装的，但如果由于某种原因您没有它，则可以npm install --save expo在项目目录中安装。import在应用程序代码中添加以下内容：
import{Font}from'expo';
该expo库提供了一个API，用于从JavaScript代码访问设备的本机功能。Font是处理与字体相关的任务的模块。首先，我们必须使用我们的资源目录加载字体Expo.Font.loadAsync()。我们可以在组件的componentDidMount（）生命周期方法中执行此操作App。在以下方法中添加以下方法App：现在我们将字体文件保存到磁盘并导入Font SDK，让我们添加以下代码：
exportdefaultclassAppextendsReact.Component{componentDidMount(){Font.loadAsync({'open-sans-bold':require('./assets/fonts/OpenSans-Bold.ttf'),});}// ...}
这将加载Open Sans Bold并将其与'open-sans-bold' Expo的字体映射中的名称相关联。现在我们只需要在Text组件中引用这个字体。
注意：通过Expo加载的字体当前不支持fontWeight或fontStyle属性 - 您需要加载字体的这些变体并按名称指定它们，正如我们在这里用粗体所做的那样。
使用Text组件中的字体
使用React Native，您可以Text使用fontFamilystyle属性在组件中指定字体。这fontFamily是我们使用的关键Font.loadAsync。
<Text style={{fontFamily:'open-sans-bold',fontSize:56}}>Hello,world!</Text>
在下次刷新时，应用程序似乎仍然不会显示Open Sans Bold的文本。您将看到它仍在使用默认系统字体。问题是这Expo.Font.loadAsync()是一个异步调用，需要一些时间才能完成。在完成之前，Text组件已使用默认字体呈现，因为它无法找到'open-sans-bold'字体（尚未加载）。
在渲染之前等待加载字体
我们需要一种Text在字体加载完成后重新渲染组件的方法。我们可以通过fontLoaded在App组件状态中保留一个布尔值来跟踪字体是否已加载来实现。我们Text只在fontLoadedis时渲染组件true。
首先，我们fontLoaded在App类构造函数中初始化为false ：
classAppextendsReact.Component{state={fontLoaded:false,};// ...}
接下来，我们必须设置fontLoaded到true当字体加载完成。Expo.Font.loadAsync()返回在Promise成功加载并准备使用字体时满足的值。因此，我们可以使用异步/ AWAIT与componentDidMount()等待，直到字体加载，然后更新我们的状态。
classAppextendsReact.Component{asynccomponentDidMount(){awaitFont.loadAsync({'open-sans-bold':require('./assets/fonts/OpenSans-Bold.ttf'),});this.setState({fontLoaded:true});}// ...}
最后，我们希望只渲染Text，如果组件fontLoaded是true。我们可以通过Text使用以下内容替换元素来完成此操作：
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>{this.state.fontLoaded?(<Text style={{fontFamily:'open-sans-bold',fontSize:56}}>Hello,world!</Text>):null}</View>
null是React Native简单地忽略了一个子元素，因此在跳过Text时fontLoaded会跳过渲染组件false。现在，在刷新应用程序时，您将看到open-sans-bold使用该应用程序。
为方便起见，此技术内置于选项卡模板中，您可以在此处看到。
注意：通常，您需要在显示应用程序之前加载应用程序主要字体，以避免在加载字体后文本闪烁。建议的方法是将Font.loadAsync调用移动到顶级组件。
