Expo大作战(十二)--expo中的自定义样式Custom font，以及expo中的路由Route&Navigation

简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式，对expo进行一次大补血！欢迎加入expo兴趣学习交流群：597732981

【之前我写过一些列关于expo和rn入门配置的东i西，大家可以点击这里查看：从零学习rn开发】

相关文章：

Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

Expo大作战(二)--expo的生命周期，expo社区交流方式，expo学习必备资源，开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app，expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link，对link这块东西没有详细看，大家可以来和我交流

更多>>

接下来就开始撸码

---

使用自定义字体

iOS和Android都有自己的平台字体集，但如果您想在应用程序中注入更多品牌个性，精选字体可能会有很长的路要走。 在本指南中，我们将引导您为expo应用添加自定义字体。 在这个例子中，我们将使用来自谷歌字体的Open Sans，并且该过程对于其他任何字体都是相同的，因此可以随意将其与您的用例相匹配。 在继续之前，请继续并下载Open Sans

启动代码

首先让我们从一个基本的“Hello world！”应用程序开始。 在XDE/exp中创建一个新项目并将App.js更改为以下内容：

import React from 'react';
import {
  Text,
  View,
} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: , justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize:  }}>
          Hello, world!
        </Text>
      </View>
    );
  }
}

在使用Open Sans之前，尝试让这个基本应用程序运行，这样您就可以确定当前项目没有什么问题。

下载字体

以您下载的Open Sans zip文件为例，将其解压并将OpenSans-Bold.ttf复制到项目中的资产目录中。 我们推荐的位置是your-project/assets/fonts。

将字体加载到您的应用中

为了加载和使用字体，我们将使用expo的SDK，当您创建一个新的expo目时预装，但如果由于某种原因您没有它，您可以使用npm install --save expo安装在您的项目中 目录。 然后在您的应用程序代码中添加以下导入：

import { Font } from 'expo';

expo 类库提供了一个API，用于从JavaScript代码访问设备的本地功能。 font是处理字体相关任务的模块。 首先，我们必须使用Expo.Font.loadAsync（）从我们的资产目录加载字体。 我们可以在App组件的componentDidMount（）生命周期方法中执行此操作。 在App中添加以下方法：现在我们已将字体文件保存到磁盘并导入了Font SDK，接下来添加以下代码：

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
  }

  // ...
}

这会加载Open Sans Bold，并将其与expo字体映射中的“open-sans-bold”名称相关联。 现在我们只需要在Text组件中引用这个字体。

注意：通过Expo加载的字体目前不支持fontWeight或fontStyle属性 - 您将需要加载字体的这些变体并按名称指定它们，正如我们在这里用粗体所做的那样。

在Text组件中使用字体

使用React Native，您可以使用fontFamily样式属性在文本组件中指定字体。 fontFamily是我们用于Font.loadAsync的关键。

<Text style={{ fontFamily: 'open-sans-bold', fontSize:  }}>
  Hello, world!
</Text>

在下次刷新时，该应用程序似乎仍然不以Open Sans Bold显示文本。 您会看到它仍在使用默认的系统字体。 这是由于Expo.Font.loadAsync（）是一个异步调用，需要一些时间才能完成。 在完成之前，Text组件已经使用默认字体呈现，因为它无法找到'open-sans-bold'字体（所以不会加载这个我们自定义的字体）。

在渲染之前等待加载字体

当字体完成加载时，我们需要一种重新呈现Text组件的方式。 我们可以通过在App组件的状态中保持一个boolean 值fontLoaded来跟踪字体是否已加载(We can do this by keeping a boolean value fontLoaded in the App component’s state that keeps track of whether the font has been loaded)。 只有在fontLoaded为true的情况下，我们才会呈现Text组件。

首先我们在App类的构造函数中初始化fontLoaded为false：

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

  // ...
}

接下来，当字体完成加载时，我们必须将fontLoaded设置为true。 Expo.Font.loadAsync（）返回一个Promise，当字体被成功加载并准备使用时，Promise被满足。 所以我们可以使用componentDidMount()的async / await等待字体加载，然后更新我们的状态。

class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });

    this.setState({ fontLoaded: true });
  }

  // ...
}

最后，如果fontLoaded为true，我们只想渲染Text组件。 我们可以通过用以下代替Text元素来实现这一点：（完美）

<View style={{ flex: , justifyContent: 'center', alignItems: 'center' }}>
  {
    this.state.fontLoaded ? (
      <Text style={{ fontFamily: 'open-sans-bold', fontSize:  }}>
        Hello, world!
      </Text>
    ) : null
  }
</View>

React Native会简单地忽略空的子元素，因此当fontLoaded为false时，会跳过呈现文本组件。 现在刷新应用程序，您将看到使用open-sans-bold。

为了方便起见，此技术内置于Tabs模板中，如您在此处所见。

注意：通常，您需要在显示应用程序之前加载应用程序的主要字体，以避免字体加载后文字闪烁。 推荐的方法是将Font.loadAsync调用移动到顶层组件。

路由和导航

网络上的“单页面应用程序”不是具有单个屏幕的应用程序，这在大多数情况下确实无用( A“single page app” on the web is not an app with a single screen, that would indeed be useless most of the time);相反，它是一个不要求浏览器导航到每个新屏幕的新URL的应用程序。一个“单页面应用程序”将使用自己的路由子系统（例如：react-router）来分离正在显示的屏幕和URL栏。通常它也会更新URL栏，但是会覆盖会导致浏览器完全重新加载页面。这样做的目的是为了让体验流畅和“应用”。

这个相同的概念适用于本地移动应用当您导航到新屏幕时，不是刷新整个应用程序并从该屏幕重新开始，而是将屏幕推入导航堆栈并根据其配置将其动态显示到视图中。

我们推荐用于expo的路由和导航的类库是React Navigation。您可以在React Navigation网站上查看React Nativation的完整文档。

尝试一下

要熟悉React Navigation的能力，最好的方法就是试用React Navigation示例Expo应用程序。在这里你可以下载一个demo关于expo中reactnavigation的体验，体验完成，回到这里，继续阅读！

简介：最简单的导航配置

您可以通过将全部以下代码复制到App.js上一个全新的空白Expo项目中，并运行npm install react-navigation --save（安装react-navigation组件库）来执行此操作。

mport React from 'react';
import {
  Text,
  View,
} from 'react-native';

import {
  StackNavigator,
} from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home'
  };

  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: }}>
        <Text onPress={this._handlePress}>HomeScreen!</Text>
      </View>
    )
  }

  _handlePress = () => {
    this.props.navigation.navigate('Home');
  }
}

export default StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

React Navigation由“路由器”，“导航器”和“屏幕”组成。在这个例子中，我们导出一个新的StackNavigator作为我们应用程序的默认组件。 StackNavigator为我们的应用程序提供了一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方式。 StackNavigator为您的应用提供平台原生的外观和感觉;在iOS新屏幕从右侧滑入，同时也可以适当地为导航栏设置动画，在Android新屏幕上从底部淡入。

Navigator采用RouteConfig作为第一个选项，这是路由名称到屏幕的映射。

大多数情况下，屏幕是普通的React组件，具有两个特殊功能：

1. 我们可以通过在每个屏幕组件上定义navigationOptions静态属性来为每个屏幕定义选项。在这个静态属性中，我们可以设置各种选项，例如标题，自定义左侧标题视图，或者当该屏幕可见时是否启用导航手势。

2.一个特殊的navigation被传入组件。navigation提供帮助功能，用于读取当前导航状态以及导航到应用中的其他屏幕。在我们的示例应用程序中，在_handlePress方法中，我们调用  　　　　this.props.navigation.navigate以导航到Home路线并将其推送到我们的堆栈。

查看选项卡模板(Reviewing the tab template)

您可能不希望从头开始完全完成所有项目，并且选项卡模板是来自expo的许多项目之一，希望您能够在开发应用程序时获得领先地位。它配备了预先安装的react-navigation和tab-based navigation。

让我们看看与导航相关的选项卡模板的项目结构。这不是你绝对必须遵循的模式，但是我们发现它对我们来说工作得很好。(一个简单的目录层次)

├── App.js
├── navigation
│   ├── RootNavigation.js
│   └── MainTabNavigator.js
├── screens
│   ├── HomeScreen.js
│   ├── LinksScreen.js
│   └── SettingsScreen.js

App.js

在Expo应用程序中，此文件包含于应用程序的根组件。在选项卡模板中，这是我们呈现RootNavigation组件的位置。

navigation/ RootNavigation.js

这个组件负责渲染我们的根导航布局。尽管在本例中我们使用基于tab的布局，但您可以在Android上使用抽屉布局，或者使用其他类型的布局。在模板中，我们在App.js中呈现的RootNavigation只会指向主屏幕，并且该屏幕中的每个选项卡都呈现自己的StackNavigator组件。

我们给这个组件的另一个责任是订阅推送通知，这样当收到或选择一个通知时，我们可以通过导航到一个新的路由进行响应。

navigation/ MainTabNavigator.js

在这个文件中，我们用三条路线，“主页”，“链接”和“设置”导出一个新的TabNavigator(In this file, we export a new TabNavigator with three routes, “Home”, “Links”, and “Settings”)。此外，我们在TabNavigator上配置了各种选项，例如定义默认tabBarIcon导航选项的功能，禁用动画，将选项卡栏设置在屏幕底部等。

screens/ * Screen.js

在我们的应用程序中代表屏幕的所有组件都被组织成一个屏幕目录（屏幕在任何地方都没有严格定义，取决于你决定你认为合适的东西 - 通常这通常是任何会被推送或弹出的东西堆栈）。

详细了解路由和导航(Learning more about routing & navigation)

react-navigation不是唯一的React Native路由库，但这是我们推荐的方法，我们可能无法回答您关于其他库的问题。您可以在Github和reactnavigation.org上了解更多信息。

---

下一张继续介绍，这一篇主要介绍了：expo中的自定义样式Custom font，以及expo中的路由Route&Navigation 欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！