The series of articles of Expo are all posted on my blog. My friend told me that the articles shared by the nuggets community are very effective, so I would like to share one here!

Brief: This series of articles will give a comprehensive introduction to EXPO. Since I came into contact with EXPO in June 2017, I have been studying EXPO off and on for nearly 10 months. I don’t want to say any more

I guess we can make up for EXPO in the form of all computer translation + personal modification +demo test! Welcome to join EXPO Interest learning exchange Group: 597732981

I’ve written a list of expo and RN introductory configurations that you can read here: Learning RN Development from Scratch.

Related articles:

What is Expo, how to install Expo Clinet and XDE, and how to use XDE

The Expo campaign (II)– the life cycle of Expo, the ways of Expo community communication, the necessary resources for learning Expo, and some issues to be concerned about when developing and using Expo

Expo (III)– Targeted at developers who have already developed React Native projects, we introduced Expo, limitations of Expo, and points to note in project selection during development

Expo (4)– Quickly build an app with Expo, the key term in Expo

5. Configuration information of the app. Json file in Expo

Expo big battle (vi)– Expo development mode, EXP command line tool in Expo, how to view log in Expo, debugging way in Expo

How does Expo use Genymotion simulator

(8)– Publish in Expo and link in Expo. I haven’t looked at link in detail. Please come and communicate with me

More > >

If I write after Chapter 23, the previous translation, whether good or not, will come to an end after all, and I will have an in-depth understanding of the basic theories of EXPO. The following expo series will mainly introduce the API of EXPO SDK.

Util

One of the Helpful Utility functions that don’t fit anywhere else provided in Expo, Including some localization/i18n methods.

Expo. Util. GetCurrentDeviceCountryAsync country code () returns the current equipment.

Expo. Util. GetCurrentLocaleAsync () returns the current locale equipment in string form.

Expo. Util. GetCurrentTimeZoneAsync () returns the current time zone name.

Expo.util.reload () Reloads the current experience. This will fetch and load the latest available JS supported by the device’s Expo environment. This is useful to trigger the update experience if you have released a new version.

Subscribing to App Updates

Expo.Util.addNewVersionListenerExperimental(listener)

Android only. The callback is called when a new version of your application is successfully downloaded in the background.

Parameter Listener (function) – A callback function called in the background when a new version of the application is successfully downloaded.

Returns an EventSubscription object that you can call remove () when you want to unsubscribe from the listener.

Related types

EventSubscription

Returning from addNewVersionListenerExperimental.

  • remove() (
    function

    ) – Unsubscribe listeners for future updates.

Event

Object passed to each event listener when a new version is available.

  • manifest (
    object

    ) – The manifest object for the new version of the application.

takeSnapshotAsync

Given the view, takeSnapshotAsync will basically intercept the view and return you an image. This is useful for users such as signature boards, where the user draws something and then wants to save an image.

Expo.takeSnapshotAsync(view, options)

Snapshots are Snapshots of the given view.

parameter

  • The view (number | ReactElement) – snapshot views ref or reactTag handle) (also known as nodes.

The options (object) –

A map of options:

  • format (
    string

    ) format (string) – “PNG” | “JPG” | “jpeg” | “WEBM”

  • quality (
    number

    ) Quality (quantity) – a number between 0 and 1, where 0 is the worst quality and 1 is the best.

  • result (
    string

    ) result (string) – Type of resulting image. – ‘file’ – Returns a file URI. – ‘base64’ – Base64 encoded image. – ‘data-uri’ – Base64 encoded image with data-URI prefix.

  • height (
    number

    Height (number) – The resulting height in pixels.

  • width (
    number

    ) Width (number) – The resulting width in pixels.

return

Option parameter specifies the format of the image. (As can be seen from the title, it is actually a screenshot)

SVG

Expo.Svg()

A set of plotting primitives such as Circle, Rect, Path, ClipPath, and Polygon. It supports most SVG elements and attributes. The implementation is provided by the React-native-SVG, and documentation is provided in the repository.

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants, Svg } from 'expo';

export default class App extends Component {
  render() {
    return(<View style={styles.container}> <Svg height={100} width={100}> <Svg.Circle cx={50} cy={50} r={45} strokeWidth={2.5} stroke="#e74c3c"
            fill="#f1c40f"
          />
          <Svg.Rect
            x={15}
            y={15}
            width={70}
            height={70}
            strokeWidth={2}
            stroke="#9b59b6"
            fill="#3498db"
          />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',}});Copy the code

This code works like this:

Sqlite is well integrated in Expo. What is SQLite? Sqlite is a database built into your mobile phone, and with sqLite you can create awesome applications

SQLite

This module provides a database that can be queried through a WebSQL-like API. The database persists between application restarts.

Here’s a simple demo. I have a project myself, the use of SQLite.

Expo.SQLite.openDatabase(name, version, description, size)

Open a database, create it, if it does not exist, and return a database object.

parameter

name (

string

) – The name of the database file to open.

Version, description, and size parameters are ignored, but are accepted by the function for compatibility with the WebSQL specification.

return

Returns a database object, as described below.

Database Objects

The database object returns expo.sqlite.openDatabase () with a call. Such an object represents a connection to a database on the device. They support one approach:

db.transaction(callback, error, success)

Perform database transactions.

parameter

  • callback (
    function

    )) – a function that represents the transaction to be executed. Take a Transaction (see below) as the only parameter on which you can add SQL statements to execute.

  • error (
    function

    )) – if there is an error in processing this transaction, it is called. Take a single parameter that describes the error.

  • success (
    function

    ) – called when the transaction completes execution on the database.

Transaction Objects

The Transaction object is passed as a parameter to the callback parameter of the db.Transaction () method on the database (see above). It allows queued SQL statements to be executed in a database transaction. It supports one approach:

tx.executeSql(sqlStatement, arguments, success, error)

SQL statements that queue to be executed in a transaction. Authors are strongly advised to use? The placeholder function of this method avoids SQL injection attacks and does not build SQL statements in real time. (Notice here)

parameter

  • SqlStatement (String) – A string containing the database query to be executed, represented as SQL. The string may contain? A placeholder that lists the values to be replaced in the argument argument.
  • arguments (
    array

    Parameter (array) – An array of values (numbers or strings) to replace? Placeholders in SQL statements.

  • success (
    function

    ) Success (function) – called during a transaction when the query completes successfully. Two parameters are taken: the transaction itself and a ResultSet object (see below) and the query result.

  • error (
    function

    ) error (function) – called when an error occurs while executing this particular query in a transaction. Two parameters are taken: the transaction itself and the error object.

The ResultSet object

The ResultSet object is returned by the second parameter of the successful callback to the Tx.executesQL () method of the Transaction (see above). They take the following forms:

{
  insertId,
  rowsAffected,
  rows: {
    length,
    item(),
    _array,
  },
}Copy the code

  • InsertId (number) – The ID of the row inserted by the SQL statement into the database.
  • RowsAffected (number) – The number of rows that the SQL statement changes.
  • Rows.length (number) – The number of rows returned by the query.
  • Rows.item (function) – rows.item (index) returns the row with the given index. If there is no such row, null is returned.
  • Rows.array (number_) – The array of actual rows returned by the query. Instead of fetching rows through rows.item (), you can use it directly.

TackSnapshotAsync, Svg, SQLite, etc. This article will be used to measure whether it is accepted or not

The number of fans has increased. Welcome to reprint, but must keep my blog link!