?

?

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

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

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

相關(guān)文章：

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

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

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

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

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

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

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

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

更多>>

接下來(lái)就開(kāi)始擼碼

---

使用自定義字體

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

啟動(dòng)代碼

首先讓我們從一個(gè)基本的“Hello world！”應(yīng)用程序開(kāi)始。 在XDE/exp中創(chuàng)建一個(gè)新項(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之前，嘗試讓這個(gè)基本應(yīng)用程序運(yùn)行，這樣您就可以確定當(dāng)前項(xiàng)目沒(méi)有什么問(wèn)題。

下載字體

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

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

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

import { Font } from 'expo';

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

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

這會(huì)加載Open Sans Bold，并將其與expo字體映射中的“open-sans-bold”名稱相關(guān)聯(lián)。 現(xiàn)在我們只需要在Text組件中引用這個(gè)字體。

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

在Text組件中使用字體

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

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

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

在渲染之前等待加載字體

當(dāng)字體完成加載時(shí)，我們需要一種重新呈現(xiàn)Text組件的方式。 我們可以通過(guò)在App組件的狀態(tài)中保持一個(gè)boolean?值fontLoaded來(lái)跟蹤字體是否已加載(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的情況下，我們才會(huì)呈現(xiàn)Text組件。

首先我們?cè)贏pp類的構(gòu)造函數(shù)中初始化fontLoaded為false：

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

接下來(lái)，當(dāng)字體完成加載時(shí)，我們必須將fontLoaded設(shè)置為true。 Expo.Font.loadAsync（）返回一個(gè)Promise，當(dāng)字體被成功加載并準(zhǔn)備使用時(shí)，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組件。 我們可以通過(guò)用以下代替Text元素來(lái)實(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會(huì)簡(jiǎn)單地忽略空的子元素，因此當(dāng)fontLoaded為false時(shí)，會(huì)跳過(guò)呈現(xiàn)文本組件。 現(xiàn)在刷新應(yīng)用程序，您將看到使用open-sans-bold。

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

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

?

路由和導(dǎo)航

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

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

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

嘗試一下

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

?

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

您可以通過(guò)將全部以下代碼復(fù)制到App.js上一個(gè)全新的空白Expo項(xiàng)目中，并運(yùn)行npm install react-navigation --save（安裝react-navigation組件庫(kù)）來(lái)執(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)航器”和“屏幕”組成。在這個(gè)例子中，我們導(dǎo)出一個(gè)新的StackNavigator作為我們應(yīng)用程序的默認(rèn)組件。 StackNavigator為我們的應(yīng)用程序提供了一種在每個(gè)新屏幕放置在堆棧頂部的屏幕之間轉(zhuǎn)換的方式。 StackNavigator為您的應(yīng)用提供平臺(tái)原生的外觀和感覺(jué);在iOS新屏幕從右側(cè)滑入，同時(shí)也可以適當(dāng)?shù)貫閷?dǎo)航欄設(shè)置動(dòng)畫(huà)，在Android新屏幕上從底部淡入。

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

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

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

? ? ? ? ?2.一個(gè)特殊的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)

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

讓我們看看與導(dǎo)航相關(guān)的選項(xiàng)卡模板的項(xiàng)目結(jié)構(gòu)。這不是你絕對(duì)必須遵循的模式，但是我們發(fā)現(xiàn)它對(duì)我們來(lái)說(shuō)工作得很好。(一個(gè)簡(jiǎ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

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

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

?

navigation/ MainTabNavigator.js

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

?

screens/ * Screen.js

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

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

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

---

?

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

?

?

總結(jié)

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

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