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