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

標籤：and   可見   http   模式   string   就是   text   情況   公眾號   

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，大家關注我的公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人部落格連結！

 

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