Expo大做戰(四十一)【完】--expo sdk 之 Assets，BarCodeScanner，AppLoading

Expo大做戰系列完結！ 

簡要：本系列文章講會對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這塊東西沒有詳細看，你們能夠來和我交流

更多>>

寫在二十三章之後的話，以前的翻譯，無論如何，好與很差，終究是告一段落，也把expo基礎理論的東西又深刻的理解了一遍，後續expo大做戰系列將主要介紹expo sdk的api。

---

Assets

該模塊提供了expo資產體系的接口。資產是與應用程序在運行時須要的源代碼一塊兒存在的任何文件。示例包括圖像，字體和聲音。 Expo的資產系統是與React Native的集成，以便您可使用require（'path / to / file'）引用文件。例如，您能夠在React Native中引用靜態圖像文件以用於Image組件。查看React Native有關靜態圖像資源的文檔以獲取更多信息。這種參考靜態圖像資源的方法expo一塊兒開箱即用。

Expo.Asset（）
這個類（class） 表明您的應用中的一項資產。它提供關於資產的元數據（例如其名稱和類型）並提供加載資產數據的工具。

• name

沒有擴展名的資產文件的名稱。在文件名中也沒有@以後的部分（用於指定圖像的縮放因子）。

• type

資產文件名的擴展名

• hash

資產數據的MD5散列

• URI

指向遠程服務器上資產數據的URI。在運行已發佈版本的應用時，這指的是expo資產服務器上expo存儲資產的位置。在開發期間從XDE運行應用程序時，此URI指向您的計算機上運行的XDE服務器，而且資產直接從您的計算機提供。

• localUri

若是資產已下載（經過調用downloadAsync（）），則指向設備上包含資產數據的本地文件的file：// URI。

• width

若是資產是圖像，圖像數據的寬度除以比例因子。比例因子是文件名後面的數字，若是不存在則爲1。

• height

若是資產是圖像，圖像數據的高度除以比例因子。比例因子是文件名後面的數字，若是不存在則爲1。

• downloadAsync（）

將資產數據下載到設備的緩存目錄中的本地文件。一旦返回的承諾沒有錯誤地履行，這個資產的localUri字段指向一個包含資產數據的本地文件。只有當資產的最新本地文件因爲較早的下載而不存在時，纔會下載該資產。

Expo.Asset.loadAsync（module）
爲方便起見，包裝Expo.Asset.fromModule（module）.downloadAsync的助手。

參數
modules（Array | number） - 一個require（'path / to / file'）數組。也能夠只是一個沒有array的模塊。

返回
返回一個Promise，解析資產已保存到磁盤的時間。

Expo.Asset.fromModule（module）
返回Expo.Asset實例，表示給定其模塊的資產

參數
module（number） - 資產的require（'path / to / file'）的值

返回
Expo.Asset資產的實例

const imageURI = Expo.Asset.fromModule(require('./images/hello.jpg')).uri;

在運行這段代碼時，imageURI會提供遠程URI，能夠讀取images / hello.jpg的內容。 該路徑相對於該代碼在其中進行評估的源文件被解析。

 

AppLoading

一個React組件，告訴expo若是它是應用程序中呈現的第一個也是惟一的組件，則應用程序加載屏幕將保持打開狀態。 當它被刪除時，加載屏幕將消失，您的應用程序將可見。

這很是有用，可以讓您下載和緩存字體，徽標和圖標圖像以及其餘資產，以確保用戶在其開始使用應用程序以前確保用戶在其設備上得到最佳體驗。

import React from 'react'; import { Image, Text, View } from 'react-native'; import { Asset, AppLoading } from 'expo'; export default class App extends React.Component { state = { isReady: false, }; render() { if (!this.state.isReady) { return ( <AppLoading startAsync={this._cacheResourcesAsync} onFinish={() => this.setState({ isReady: true })} onError={console.warn} /> ); } return ( <View style={{ flex: 1 }}>
        <Image source={require('./assets/images/expo-icon.png')} />
        <Image source={require('./assets/images/slack-icon.png')} />
      </View> ); } async _cacheResourcesAsync() { const images = [ require('./assets/images/expo-icon.png'), require('./assets/images/slack-icon.png'), ]; const cacheImages = images.map((image) => { return Asset.fromModule(image).downloadAsync(); }); return Promise.all(cacheImages) } }

屬性

爲了向後兼容（推薦使用SDK21），建議使用如下屬性，但可選。 若是您不提供任何道具，則負責協調加載資產，處理錯誤以及更新狀態以卸載AppLoading組件。

startAsync（function） - 一個返回Promise的函數，Promise應該在應用程序完成加載所需的數據和資產時解析。

onError（function） - 若是startAsync引起錯誤，它將被捕獲並傳遞給提供給onError的函數。

onFinish（function） - （若是您提供startAsync，則爲必需）。 startAsync解析或拒絕時調用。 這應該用於設置狀態並卸載AppLoading組件。

 

掃碼機（BarCodeScanner）

React組件，用於爲設備的前置或後置相機取景器渲染取景器，並檢測出框架中顯示的條形碼。 BarCodeScanner在下面使用Camera，所以在使用BarCodeScanner時可使用任何Camera prop或方法。

須要 Permissions.CAMERA。

import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { BarCodeScanner, Permissions } from 'expo'; export default class BarcodeScannerExample extends React.Component { state = { hasCameraPermission: null, } async componentWillMount() { const { status } = await Permissions.askAsync(Permissions.CAMERA); this.setState({hasCameraPermission: status === 'granted'}); } render() { const { hasCameraPermission } = this.state; if (hasCameraPermission === null) { return <Text>Requesting for camera permission</Text>; } else if (hasCameraPermission === false) { return <Text>No access to camera</Text>; } else { return ( <View style={{ flex: 1 }}>
          <BarCodeScanner onBarCodeRead={this._handleBarCodeRead} style={StyleSheet.absoluteFill} />
        </View> ); } } _handleBarCodeRead = ({ type, data }) => { alert(`Bar code with type ${type} and data ${data} has been scanned!`); } }

github上一個完整的demo

屬性

• onBarCodeRead（function） - 成功讀取條形碼時調用的回調函數。 該回調提供了一個形狀爲{type：string，data：string}的對象，其中的類型是指掃描的條形碼類型，數據是條形碼中編碼的信息（在這種狀況下是QR碼 ，這一般是一個URL）
• type（string） - 當「(front)前」時，請使用前置攝像頭。 當「返回」時，請使用背面照相機。 默認值：'(back)後'。
• torchMode（string） - 當'on(開)'時，設備上的閃光燈將會打開，'off(關)'時閃光燈會熄滅。 默認爲「關閉」。
• barCodeTypes（array） - 一組條形碼類型。 用法：BarCodeScanner.Constants.BarCodeType.<codeType>其中codeType是上面列出的之一。 默認值：全部支持的條碼類型。 例如：barCodeTypes = {[BarCodeScanner.Constants.BarCodeType.qr]}

---

 Expo大做戰翻譯系列結束，expo sdk的部分api沒有翻譯，你們若是有須要能夠瀏覽官網，本章主要翻譯expo sdk 之 Assets，BarCodeScanner，AppLoading，你們關注個人微信公衆號，這篇文章是否被你們承認，個人衡量標準就是公衆號粉絲增加人數。歡迎你們轉載，但必須保留本人博客連接！