?

?

簡要：本系列文章講會對expo進(jìn)行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續(xù)續(xù)，一路走來將近10個月，廢話不多說，接下來你看到內(nèi)容，講全部來與官網(wǎng)

我猜去全部機(jī)翻+個人修改補(bǔ)充+demo測試的形式，對expo進(jìn)行一次大補(bǔ)血！歡迎加入expo興趣學(xué)習(xí)交流群：597732981

【之前我寫過一些列關(guān)于expo和rn入門配置的東i西，大家可以點(diǎn)擊這里查看：從零學(xué)習(xí)rn開發(fā)】

相關(guān)文章：

Expo大作戰(zhàn)(一)--什么是expo，如何安裝expo clinet和xde，xde如何使用

Expo大作戰(zhàn)(二)--expo的生命周期，expo社區(qū)交流方式，expo學(xué)習(xí)必備資源，開發(fā)使用expo時關(guān)注的一些問題

Expo大作戰(zhàn)(三)--針對已經(jīng)開發(fā)過react native項(xiàng)目開發(fā)人員有針對性的介紹了expo，expo的局限性，開發(fā)時項(xiàng)目選型注意點(diǎn)等

Expo大作戰(zhàn)(四)--快速用expo構(gòu)建一個app，expo中的關(guān)鍵術(shù)語

Expo大作戰(zhàn)(五)--expo中app.json 文件的配置信息

Expo大作戰(zhàn)(六)--expo開發(fā)模式，expo中exp命令行工具，expo中如何查看日志log，expo中的調(diào)試方式

Expo大作戰(zhàn)(七)--expo如何使用Genymotion模擬器

Expo大作戰(zhàn)(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細(xì)看，大家可以來和我交流

更多>>

接下來就開始擼碼

---

使用自定義字體

iOS和Android都有自己的平臺字體集，但如果您想在應(yīng)用程序中注入更多品牌個性，精選字體可能會有很長的路要走。 在本指南中，我們將引導(dǎo)您為expo應(yīng)用添加自定義字體。 在這個例子中，我們將使用來自谷歌字體的Open Sans，并且該過程對于其他任何字體都是相同的，因此可以隨意將其與您的用例相匹配。 在繼續(xù)之前，請繼續(xù)并下載Open Sans

啟動代碼

首先讓我們從一個基本的“Hello world！”應(yīng)用程序開始。 在XDE/exp中創(chuàng)建一個新項(xiàng)目并將App.js更改為以下內(nèi)容：

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之前，嘗試讓這個基本應(yīng)用程序運(yùn)行，這樣您就可以確定當(dāng)前項(xiàng)目沒有什么問題。

下載字體

以您下載的Open Sans zip文件為例，將其解壓并將OpenSans-Bold.ttf復(fù)制到項(xiàng)目中的資產(chǎn)目錄中。 我們推薦的位置是your-project/assets/fonts。

將字體加載到您的應(yīng)用中

為了加載和使用字體，我們將使用expo的SDK，當(dāng)您創(chuàng)建一個新的expo目時預(yù)裝，但如果由于某種原因您沒有它，您可以使用npm install --save expo安裝在您的項(xiàng)目中 目錄。 然后在您的應(yīng)用程序代碼中添加以下導(dǎo)入：

import { Font } from 'expo';

expo 類庫提供了一個API，用于從JavaScript代碼訪問設(shè)備的本地功能。 font是處理字體相關(guān)任務(wù)的模塊。 首先，我們必須使用Expo.Font.loadAsync（）從我們的資產(chǎn)目錄加載字體。 我們可以在App組件的componentDidMount（）生命周期方法中執(zhí)行此操作。 在App中添加以下方法：現(xiàn)在我們已將字體文件保存到磁盤并導(dǎo)入了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”名稱相關(guān)聯(lián)。 現(xiàn)在我們只需要在Text組件中引用這個字體。

注意：通過Expo加載的字體目前不支持fontWeight或fontStyle屬性 - 您將需要加載字體的這些變體并按名稱指定它們，正如我們在這里用粗體所做的那樣。

在Text組件中使用字體

使用React Native，您可以使用fontFamily樣式屬性在文本組件中指定字體。 fontFamily是我們用于Font.loadAsync的關(guān)鍵。

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

在下次刷新時，該應(yīng)用程序似乎仍然不以O(shè)pen Sans Bold顯示文本。 您會看到它仍在使用默認(rèn)的系統(tǒng)字體。 這是由于Expo.Font.loadAsync（）是一個異步調(diào)用，需要一些時間才能完成。 在完成之前，Text組件已經(jīng)使用默認(rèn)字體呈現(xiàn)，因?yàn)樗鼰o法找到'open-sans-bold'字體（所以不會加載這個我們自定義的字體）。

在渲染之前等待加載字體

當(dāng)字體完成加載時，我們需要一種重新呈現(xiàn)Text組件的方式。 我們可以通過在App組件的狀態(tài)中保持一個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的情況下，我們才會呈現(xiàn)Text組件。

首先我們在App類的構(gòu)造函數(shù)中初始化fontLoaded為false：

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

接下來，當(dāng)字體完成加載時，我們必須將fontLoaded設(shè)置為true。 Expo.Font.loadAsync（）返回一個Promise，當(dāng)字體被成功加載并準(zhǔn)備使用時，Promise被滿足。 所以我們可以使用componentDidMount()的async / await等待字體加載，然后更新我們的狀態(tài)。

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元素來實(shí)現(xiàn)這一點(diǎn)：（完美）

<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會簡單地忽略空的子元素，因此當(dāng)fontLoaded為false時，會跳過呈現(xiàn)文本組件。 現(xiàn)在刷新應(yīng)用程序，您將看到使用open-sans-bold。

為了方便起見，此技術(shù)內(nèi)置于Tabs模板中，如您在此處所見。

注意：通常，您需要在顯示應(yīng)用程序之前加載應(yīng)用程序的主要字體，以避免字體加載后文字閃爍。 推薦的方法是將Font.loadAsync調(diào)用移動到頂層組件。

?

路由和導(dǎo)航

網(wǎng)絡(luò)上的“單頁面應(yīng)用程序”不是具有單個屏幕的應(yīng)用程序，這在大多數(shù)情況下確實(shí)無用(?A“single page app” on the web is not an app with a single screen, that would indeed be useless most of the time);相反，它是一個不要求瀏覽器導(dǎo)航到每個新屏幕的新URL的應(yīng)用程序。一個“單頁面應(yīng)用程序”將使用自己的路由子系統(tǒng)（例如：react-router）來分離正在顯示的屏幕和URL欄。通常它也會更新URL欄，但是會覆蓋會導(dǎo)致瀏覽器完全重新加載頁面。這樣做的目的是為了讓體驗(yàn)流暢和“應(yīng)用”。

這個相同的概念適用于本地移動應(yīng)用當(dāng)您導(dǎo)航到新屏幕時，不是刷新整個應(yīng)用程序并從該屏幕重新開始，而是將屏幕推入導(dǎo)航堆棧并根據(jù)其配置將其動態(tài)顯示到視圖中。

我們推薦用于expo的路由和導(dǎo)航的類庫是React Navigation。您可以在React Navigation網(wǎng)站上查看React Nativation的完整文檔。

嘗試一下

要熟悉React Navigation的能力，最好的方法就是試用React Navigation示例Expo應(yīng)用程序。在這里你可以下載一個demo關(guān)于expo中reactnavigation的體驗(yàn)，體驗(yàn)完成，回到這里，繼續(xù)閱讀！

?

簡介：最簡單的導(dǎo)航配置

您可以通過將全部以下代碼復(fù)制到App.js上一個全新的空白Expo項(xiàng)目中，并運(yùn)行npm install react-navigation --save（安裝react-navigation組件庫）來執(zhí)行此操作。

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由“路由器”，“導(dǎo)航器”和“屏幕”組成。在這個例子中，我們導(dǎo)出一個新的StackNavigator作為我們應(yīng)用程序的默認(rèn)組件。 StackNavigator為我們的應(yīng)用程序提供了一種在每個新屏幕放置在堆棧頂部的屏幕之間轉(zhuǎn)換的方式。 StackNavigator為您的應(yīng)用提供平臺原生的外觀和感覺;在iOS新屏幕從右側(cè)滑入，同時也可以適當(dāng)?shù)貫閷?dǎo)航欄設(shè)置動畫，在Android新屏幕上從底部淡入。

Navigator采用RouteConfig作為第一個選項(xiàng)，這是路由名稱到屏幕的映射。

大多數(shù)情況下，屏幕是普通的React組件，具有兩個特殊功能：

我們可以通過在每個屏幕組件上定義navigationOptions靜態(tài)屬性來為每個屏幕定義選項(xiàng)。在這個靜態(tài)屬性中，我們可以設(shè)置各種選項(xiàng)，例如標(biāo)題，自定義左側(cè)標(biāo)題視圖，或者當(dāng)該屏幕可見時是否啟用導(dǎo)航手勢。

? ? ? ? ?2.一個特殊的navigation被傳入組件。navigation提供幫助功能，用于讀取當(dāng)前導(dǎo)航狀態(tài)以及導(dǎo)航到應(yīng)用中的其他屏幕。在我們的示例應(yīng)用程序中，在_handlePress方法中，我們調(diào)用? 　　　　this.props.navigation.navigate以導(dǎo)航到Home路線并將其推送到我們的堆棧。

查看選項(xiàng)卡模板(Reviewing the tab template)

您可能不希望從頭開始完全完成所有項(xiàng)目，并且選項(xiàng)卡模板是來自expo的許多項(xiàng)目之一，希望您能夠在開發(fā)應(yīng)用程序時獲得領(lǐng)先地位。它配備了預(yù)先安裝的react-navigation和tab-based navigation。

讓我們看看與導(dǎo)航相關(guān)的選項(xiàng)卡模板的項(xiàng)目結(jié)構(gòu)。這不是你絕對必須遵循的模式，但是我們發(fā)現(xiàn)它對我們來說工作得很好。(一個簡單的目錄層次)

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

App.js

在Expo應(yīng)用程序中，此文件包含于應(yīng)用程序的根組件。在選項(xiàng)卡模板中，這是我們呈現(xiàn)RootNavigation組件的位置。

navigation/ RootNavigation.js

這個組件負(fù)責(zé)渲染我們的根導(dǎo)航布局。盡管在本例中我們使用基于tab的布局，但您可以在Android上使用抽屜布局，或者使用其他類型的布局。在模板中，我們在App.js中呈現(xiàn)的RootNavigation只會指向主屏幕，并且該屏幕中的每個選項(xiàng)卡都呈現(xiàn)自己的StackNavigator組件。

我們給這個組件的另一個責(zé)任是訂閱推送通知，這樣當(dāng)收到或選擇一個通知時，我們可以通過導(dǎo)航到一個新的路由進(jìn)行響應(yīng)。

?

navigation/ MainTabNavigator.js

在這個文件中，我們用三條路線，“主頁”，“鏈接”和“設(shè)置”導(dǎo)出一個新的TabNavigator(In this file, we export a new?TabNavigator?with three routes, “Home”, “Links”, and “Settings”)。此外，我們在TabNavigator上配置了各種選項(xiàng)，例如定義默認(rèn)tabBarIcon導(dǎo)航選項(xiàng)的功能，禁用動畫，將選項(xiàng)卡欄設(shè)置在屏幕底部等。

?

screens/ * Screen.js

在我們的應(yīng)用程序中代表屏幕的所有組件都被組織成一個屏幕目錄（屏幕在任何地方都沒有嚴(yán)格定義，取決于你決定你認(rèn)為合適的東西 - 通常這通常是任何會被推送或彈出的東西堆棧）。

詳細(xì)了解路由和導(dǎo)航(Learning more about routing & navigation)

react-navigation不是唯一的React Native路由庫，但這是我們推薦的方法，我們可能無法回答您關(guān)于其他庫的問題。您可以在Github和reactnavigation.org上了解更多信息。

---

?

下一張繼續(xù)介紹，這一篇主要介紹了：expo中的自定義樣式Custom font，以及expo中的路由Route&Navigation?歡迎大家關(guān)注我的微信公眾號，這篇文章是否被大家認(rèn)可，我的衡量標(biāo)準(zhǔn)就是公眾號粉絲增長人數(shù)。歡迎大家轉(zhuǎn)載，但必須保留本人博客鏈接！

?

?

總結(jié)

以上是生活随笔為你收集整理的Expo大作战(十二)--expo中的自定义样式Custom font，以及expo中的路由RouteNavigation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。