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

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...

簡要：本系列文章講會對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: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 56 }}>
          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: 56 }}>
  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: 1, justifyContent: 'center', alignItems: 'center' }}>
  {
    this.state.fontLoaded ? (
      <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
        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: 1}}>
        <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組件，具有兩個特殊功能：

我們可以通過在每個屏幕組件上定義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導航選項的功能，禁用動畫，將選項卡欄設置在屏幕底部等。