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

Expo大作戰系列完結！簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興 ...

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，大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！