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

時間 2020-07-11

標籤 expo 大做十二自定義樣式 custom font 以及路由 route&navigation route navigation 欄目系統網絡简体版

原文原文鏈接

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話很少說，接下來你看到內容，講所有來與官網html

我猜去所有機翻+我的修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流羣：597732981react

【以前我寫過一些列關於expo和rn入門配置的東i西，你們能夠點擊這裏查看：從零學習rn開發】git

使用自定義字體

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導航選項的功能，禁用動畫，將選項卡欄設置在屏幕底部等。