Expo大作戰(二十七)--expo sdk api之Util(expo自帶工具類),tackSnapshotAsync,Svg,SQLite

鳥窩發表於2018-03-18

Expo大作戰系列文章都在我都blog上貼著,朋友和我說掘金社群分享文章效果不錯,故,來此分享一篇!

簡要:本系列文章講會對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。

Util

expo中提供的一個工具類,不適合其他地方的有用實用功能(Helpful utility functions that don’t fit anywhere else),包括一些本地化/國際化的方法(including some localization / i18n methods.)。

Expo.Util.getCurrentDeviceCountryAsync()
返回當前的裝置國家程式碼。

Expo.Util.getCurrentLocaleAsync()
以字串形式返回當前裝置區域設定。

Expo.Util.getCurrentTimeZoneAsync()
返回當前裝置時區名稱。

Expo.Util.reload()
重新載入當前的體驗(Reloads the current experience)。這將獲取並載入裝置的Expo環境支援的最新可用JS。如果您已釋出新版本,這對觸發更新體驗很有用。

訂閱應用更新(Subscribing to App Updates)

Expo.Util.addNewVersionListenerExperimental(listener)

僅限Android。當您的應用程式的新版本在後臺成功下載時呼叫回撥。

引數
listener(function) - 在後臺成功下載新版本的應用程式時呼叫的回撥函式。

返回
一個EventSubscription物件,當您想要從偵聽器取消訂閱時,您可以呼叫remove()。

相關型別(Related types)

EventSubscription

從addNewVersionListenerExperimental返回。

  • remove() (
    function
    ) - 取消訂閱未來更新的偵聽器。

Event

新版本可用時傳入每個事件偵聽器的物件。

  • manifest (
    object
    ) - 應用程式新版本的清單物件。

takeSnapshotAsync

鑑於檢視,takeSnapshotAsync將基本上擷取該檢視併為您返回一個影象。 這對於簽名板等使用者非常有用,使用者在其中繪製某些內容,然後想要從中儲存影象。

Expo.takeSnapshotAsync(view, options)

快照給定的檢視(Snapshots the given view)。

引數

  • view(number | ReactElement) - 快照檢視的ref或reactTag(也稱為節點控制程式碼)。

options (object) —

選項圖(A map of options:):

  • format (
    string
    ) 格式(字串) - “png”| “jpg”| “jpeg”|“WEBM”
  • quality (
    number
    ) 質量(數量) - 0到1之間的數字,其中0是最差的質量,1是最好的。
  • result (
    string
    ) 結果(字串) - 結果影象的型別。 - 'file' - 返回一個檔案uri。 - 'base64' - base64編碼的影象。 - 'data-uri' - 帶有data-uri字首的base64編碼影象。
  • height (
    number
    ) 高度(數字) - 以畫素為單位的結果高度。
  • width (
    number
    ) 寬度(數字) - 以畫素為單位的結果寬度。

返回

選項引數中指定的格式的影象。(從這個title可以看出,其實就是截圖)

SVG

Expo.Svg()

一組繪圖基元,如Circle,Rect,Path,ClipPath和Polygon。 它支援大多數SVG元素和屬性。 該實現由react-native-svg提供,並在該儲存庫中提供文件。

複製程式碼
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',
  },
});複製程式碼
複製程式碼

這段程式碼執行效果:

這一章最後在說一下sqlite,expo中對sqlite做了很好的整合,sqlite是什麼?是移動端手機內建的一個資料庫,很好的利用sqlite,你就能打造牛逼的應用程式

SQLite

該模組提供了一個可以通過類似WebSQL的API查詢的資料庫。 資料庫在應用程式的重新啟動之間持續存在。

這裡有一個簡單的demo。 我本人也有一個專案,對sqlite的運用。

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

開啟一個資料庫,建立它,如果它不存在,並返回一個資料庫物件。

引數

name (

string

) - 要開啟的資料庫檔案的名稱。

版本,描述和大小引數被忽略,但被函式接受以相容WebSQL規範(but are accepted by the function for compatibility with the WebSQL specification.)。

返回

返回一個資料庫物件,如下所述。

資料庫物件(Database objects)

資料庫物件通過呼叫返回Expo.SQLite.openDatabase()。 這樣的物件表示到裝置上的資料庫的連線。 他們支援一種方法:

db.transaction(callback, error, success)

執行資料庫事務。

引數

  • callback (
    function
    )) - 表示要執行的事務的函式。 將一個Transaction(見下文)作為唯一引數,可以在其上新增SQL語句來執行。
  • error (
    function
    )) - 如果處理此事務發生錯誤,則呼叫它。 採用描述錯誤的單個引數。
  • success (
    function
    ) - 當事務在資料庫上完成執行時呼叫。

事物物件(Transaction objects)

Transaction物件作為引數傳遞給資料庫上的db.transaction()方法的回撥引數(參見上文)。它允許排隊SQL語句在資料庫事務中執行。它支援一種方法:

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

排隊要在事務中執行的SQL語句。強烈建議作者使用?該方法的佔位符功能可避免SQL隱碼攻擊,並且不會即時構建SQL語句。(注意這裡)

引數

  • sqlStatement(string) - 包含要執行的資料庫查詢的字串,表示為SQL。該字串可能包含?佔位符,在引數引數中列出要替換的值。
  • arguments (
    array
    ) 引數(陣列) - 要替換​​的值(數字或字串)的陣列? SQL語句中的佔位符。
  • success (
    function
    ) 成功(功能) - 在事務處理期間查詢成功完成時呼叫。採用兩個引數:事務本身和一個ResultSet物件(請參見下文)以及查詢結果。
  • error (
    function
    ) 錯誤(函式) - 在事務中執行此特定查詢時發生錯誤時呼叫。採用兩個引數:事務本身和錯誤物件。

ResultSet物件

ResultSet物件通過Transaction的tx.executeSql()方法的成功回撥的第二個引數返回(參見上文)。 他們有以下形式:

複製程式碼
{
  insertId,
  rowsAffected,
  rows: {
    length,
    item(),
    _array,
  },
}複製程式碼
複製程式碼
  • insertId(number) - 插入資料庫的SQL語句所插入的行的行ID。
  • rowsAffected(number) - SQL語句更改的行數。
  • rows.length(number) - 查詢返回的行數。
  • rows.item(function) - rows.item(index)返回具有給定索引的行。 如果沒有這樣的行,則返回null。
  • rows.array(number_) - 查詢返回的實際行陣列。 可以直接使用,而不是通過rows.item()獲取行。

下一張繼續介紹,這一篇主要介紹了:expo sdk api之Util(expo自帶工具類),tackSnapshotAsync,Svg,SQLite歡迎大家關注我的微信公眾號,這篇文章是否被大家認可,我的衡量標準就是公

眾號粉絲增長人數。歡迎大家轉載,但必須保留本人部落格連結!


相關文章