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

簡要：本系列文章講會對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