Expo Big Battle (41) "End"--expo SDK assets,barcodescanner,apploading

Expo big Battle series end!  

Brief: This series of articles will be a comprehensive introduction to the Expo, I contact the Expo since June 2017, the study of the Expo intermittent, all the way to nearly 10 months, nonsense not to say, next you see the content, speak all to the official website

I guess go all machine turn + personal modification supplement +demo test form, to the expo to do a big blood! Welcome to join the Expo Interest Learning Exchange Group: 597732981

"Before I wrote some columns about Expo and RN entry configuration for East I west, you can click here to view: from zero learning RN development"

Related articles:

Expo Big Battle (a)--what is the expo, how to install Expo Clinet and xde,xde how to use

Expo Big Battle (ii)--expo life cycle, Expo Community exchanges, Expo learning necessary resources, the development of the use of the expo concerns some issues

Expo Big Battle (iii)--to the development of react native project developers have targeted the introduction of the limitations of Expo,expo, the development of project selection points of attention, etc.

Expo Big Battle (Iv.)--Rapid use of Expo to build a key term in a App,expo

Expo Big Battle (v) configuration information for App.json files in--expo

Expo Big Battle (vi)--EXPO Development mode, Expo in the EXP Command line tool, Expo How to view the debug mode in the log Log,expo

Expo Big Battle (vii)--expo How to use Genymotion simulator

Expo Big Battle (eight)--expo in the Publish and Expo link, to link this piece of things not detailed see, we can come to communicate with me

More >>

Written in chapter 23 after the words, before the translation, no matter how, good and bad, after all, is the end of the expo, but also the basic theory of the things in-depth understanding again, the following Expo big Battle series will mainly introduce the Expo SDK API.

Assets

This module provides an interface to the Expo asset system. An asset is any file that exists with the source code that the application needs at run time. Examples include images, fonts, and sounds. The asset system of the Expo is integrated with the react native so that you can use require (' path/to/file ') to reference the file. For example, you can reference a static image file in react native for use with the image component. View react native documentation for static image resources for more information. This method of referencing static image resources is available out of the box.

Expo.asset ()
This class represents an asset in your app. It provides metadata about an asset, such as its name and type, and provides tools for loading asset data.

• Name

The name of an asset file without an extension. There is also a section after the @ in the file name (to specify the scaling factor for the image).

• Type

The extension of the asset file name

• Hash

MD5 Hash of asset data

• Uri

A URI that points to the asset data on the remote server. When running a published version of an app, this refers to the location of the Expo storage asset on the Expo asset server. When you run the application from XDE during development, this URI points to the XDE server that is running on your computer, and the asset is provided directly from your computer.

• Localuri

If the asset has been downloaded (by calling Downloadasync ()), point to the file://URI of the local file on the device that contains the asset data.

• Width

If the asset is an image, the width of the image data is divided by the scale factor. The scale factor is the number after the file name, or 1 if it does not exist.

• Height

If the asset is an image, the height of the image data is divided by the scale factor. The scale factor is the number after the file name, or 1 if it does not exist.

• Downloadasync ()

Download the asset data to a local file in the device's cache directory. Once the promised return is not fulfilled in error, the Localuri field of the asset points to a local file containing the asset data. The asset is downloaded only if the latest local file for the asset does not exist due to an earlier download.

Expo.Asset.loadAsync (module)
For convenience, Package Expo.Asset.fromModule (module). Downloadasync's assistant.

Parameters
Modules (Array | Number)-An array of require (' Path/to/file '). It can also be just a module without an array.

Return
Returns a promise that resolves when the asset was saved to disk.

Expo.Asset.fromModule (module)
Returns an Expo.asset instance that represents the asset given its module

Parameters
Module (number)-The value of the Require (' path/to/file ') of the asset

Return
Examples of expo.asset assets

const Imageuri = Expo.Asset.fromModule (Require ('./images/hello.jpg')). Uri;

When you run this code, Imageuri provides a remote URI that reads the contents of the images/hello.jpg. The path is parsed relative to the source file in which the code is evaluated.

Apploading

A react component that tells Expo if it is the first and only component that is rendered in the application, the application load screen will remain open. When it is deleted, the load screen disappears and your application will be visible.

This is useful to allow you to download and cache fonts, logos and icon images, and other assets to ensure that users have the best experience on their devices before they start using the application.

Import React from 'react'; import {Image, Text, View} from 'react-native'; import {Asset, apploading} from 'Expo'; exportdefault classApp 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 () {ConstImages =[Require ('./assets/images/expo-icon.png'), Require ('./assets/images/slack-icon.png'),    ]; ConstCacheimages = Images.map (image) = = {      returnasset.frommodule (image). Downloadasync ();    }); returnPromise.all (Cacheimages)}}

Property

For backwards compatibility (it is recommended to use SDK21), the following properties are recommended, but optional. If you do not provide any props, you are responsible for coordinating the loading of assets, handling errors, and updating the status to uninstall the Apploading component.

Startasync-A function that returns promise, promise should be resolved when the application finishes loading the required data and assets.

OnError (function)-if Startasync throws an error, it is captured and passed to the function provided to OnError.

OnFinish (function)-(required if you provide Startasync). Startasync is called when parsing or rejecting. This should be used to set the state and unload the apploading component.

Sweep code Machine (Barcodescanner)

The react component, which renders the viewfinder for the front or rear camera viewfinder of the device and detects the barcode displayed in the frame. Barcodescanner uses camera below, so you can use any camera prop or method when using Barcodescanner.

Need Permissions.camera.

Import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {barcodescanner, Permissions} from 'Expo'; exportdefault classBarcodescannerexample extends React.component { state={hascamerapermission:NULL,  }  AsyncComponentwillmount () {Const{Status} =awaitPermissions.askasync (Permissions.camera);  This. setState ({hascamerapermission:status = = ='granted'}); } render () {Const{Hascamerapermission} = This. State; if(Hascamerapermission = = =NULL) {      return<text>requesting forCamera 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} have been scanned!`); }}

GitHub Previous Full Demo

Property

• Onbarcoderead (function)-The callback function that is called when a barcode is successfully read. The callback provides an object with the shape {type:string,data:string}, where the type refers to the scanned barcode type, the data is the encoded information in the barcode (in this case the QR code, which is usually a URL)
• Type (string)-use a front-facing camera when "(front)". When "Back", use the back camera. Default value: ' (back) '.
• Torchmode (String)-when ' on ', the flash on the device will open and the flash will turn off when ' off '. The default is "off."
• Barcodetypes (Array)-a set of barcode types. Usage:barcodescanner.constants.barcodetype.<codetype> where CodeType is one of the listed above. Default value: All supported barcode types. For example: Barcodetypes = {[BARCODESCANNER.CONSTANTS.BARCODETYPE.QR]}

Expo great Combat translation end, the Expo SDK part of the API is not translated, if you need to browse the official website, this chapter mainly translated the Assets of the Expo SDK, BarCodeScanner， AppLoading , people are concerned about my public number, whether this article is approved by everyone, my measure is the number of public number fans increase. Welcome to reprint, but must keep my blog link!

Expo Big Battle (41) "End"--expo SDK assets,barcodescanner,apploading