Expo大作戰(三十四)--expo sdk api之LinearGradient(線性漸變)，KeepAwake（保持屏幕不休眠）,IntentLauncherAndroid,Gyroscope，

来源:https://www.cnblogs.com/gdsblog/archive/2018/03/20/8613386.html
-Advertisement-
Play Games

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


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

LinearGradient

呈現漸變視圖的React組件。

import React from 'react';
import { Text, View } from 'react-native';
import { LinearGradient } from 'expo';

export default class FacebookButton extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <LinearGradient
          colors={['#4c669f', '#3b5998', '#192f6a']}
          style={{ padding: 15, alignItems: 'center', borderRadius: 5 }}>
          <Text
            style={{
              backgroundColor: 'transparent',
              fontSize: 15,
              color: '#fff',
            }}>
            Sign in with Facebook
          </Text>
        </LinearGradient>
      </View>
    );
  }
}

import React from 'react';
import { View } from 'react-native';
import { LinearGradient } from 'expo';

export default class BlackFade extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'orange', flex: 1 }} />
        <LinearGradient
          colors={['rgba(0,0,0,0.8)', 'transparent']}
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            height: 300,
          }}
        />
      </View>
    );
  }
}

 

Expo.LinearGradient

Props

color
表示漸變中停止的顏色數組。 至少需要兩種顏色（否則它不是漸變，它只是一種填充！）。

start
一個[x，y]數組，其中x和y是浮點數。 它們代表漸變開始的位置，作為漸變總體大小的一部分。 例如，[0.1,0.1]表示漸變將從頂部開始10％，從左側開始10％。

end
與開始相同，但是漸變結束。

end
與顏色具有相同長度的數組，其中每個元素都是具有與開始和結束值相同含義的浮動元素，但是它們表示該索引處的顏色應該位於哪裡。

 

KeepAwake

一個React組件，可以防止屏幕在渲染時休眠。 它還暴露了靜態方法來直接控制行為。

例如：組件

import React from 'react';
import { Text, View } from 'react-native';
import { KeepAwake } from 'expo';

export default class KeepAwakeExample extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <KeepAwake />
        <Text>This screen will never sleep!</Text>
      </View>
    );
  }
}

Example: static methods

import React from 'react';
import { Button, View } from 'react-native';
import { KeepAwake } from 'expo';

export default class KeepAwakeExample extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={this._activate}>Activate</Button>
        <Button onPress={this._deactivate}>Deactivate</Button>
      </View>
    );
  }

  _activate = () => {
    KeepAwake.activate();
  }

  _deactivate = () => {
    KeepAwake.deactivate();
  }
}

 

IntentLauncherAndroid


提供一種啟動android intents的方法。 例如 - 打開特定的設置屏幕。(Provides a way to launch android intents. e.g. - opening a specific settings screen.)

用法

Expo.IntentLauncherAndroid.startActivityAsync(activity, data)

開始指定的活動。 可以指定可選的數據參數，以將其他數據對象傳遞給活動。 該方法將返回一個承諾，解決用戶何時返回到應用程式。

有幾個預定義的常量可用於活動參數。 你可以在expo/expo-sdk/src/IntentLauncherAndroid.js.中找到它們。

例

import { IntentLauncherAndroid } from 'expo';

// Open location settings
IntentLauncherAndroid.startActivityAsync(
  IntentLauncherAndroid.ACTION_LOCATION_SOURCE_SETTINGS
);

 

Gyroscope

訪問設備Guroscope感測器以響應三維空間中的旋轉變化。

Expo.Gyroscope.addListener(listener)

訂閱Gyroscope的更新。

參數
偵聽器（函數） - 當Gyroscope更新可用時調用的回調函數。 當被調用時，監聽器被提供一個包含鍵x，y，z的對象的單個參數。

返回
一個EventSubscription對象，當您想要取消訂閱偵聽器時，您可以調用remove（）。

Expo.Gyroscope.removeAllListeners（）
刪除所有聽眾。

Expo.Gyroscope.setUpdateInterval（intervalMs）
訂閱Gyroscope的更新。

參數
intervalMs（數字） - Gyroscope更新之間的期望間隔（以毫秒為單位）。

import React from 'react';
import {
  Gyroscope,
} from 'expo';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

export default class GyroscopeSensor extends React.Component {
  state = {
    gyroscopeData: {},
  }

  componentDidMount() {
    this._toggle();
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  _toggle = () => {
    if (this._subscription) {
      this._unsubscribe();
    } else {
      this._subscribe();
    }
  }

  _slow = () => {
    Gyroscope.setUpdateInterval(1000);
  }

  _fast = () => {
    Gyroscope.setUpdateInterval(16);
  }

  _subscribe = () => {
    this._subscription = Gyroscope.addListener((result) => {
      this.setState({gyroscopeData: result});
    });
  }

  _unsubscribe = () => {
    this._subscription && this._subscription.remove();
    this._subscription = null;
  }

  render() {
    let { x, y, z } = this.state.gyroscopeData;

    return (
      <View style={styles.sensor}>
        <Text>Gyroscope:</Text>
        <Text>x: {round(x)} y: {round(y)} z: {round(z)}</Text>

        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={this._toggle} style={styles.button}>
            <Text>Toggle</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
            <Text>Slow</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._fast} style={styles.button}>
            <Text>Fast</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

function round(n) {
  if (!n) {
    return 0;
  }

  return Math.floor(n * 100) / 100;
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
  sensor: {
    marginTop: 15,
    paddingHorizontal: 10,
  },
});

下一張繼續介紹，這一篇主要介紹了：expo sdk api之LinearGradient(線性漸變)，KeepAwake（保持屏幕不休眠）,IntentLauncherAndroid,Gyroscope（磁力感測計），Lottie（動畫）！，歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 用redis統計大量用戶的登陸情況[只判斷是否活躍]
    有這樣的一個場景需求：有上億的用戶，要統計這批用戶的登陸情況，例如一周連續登陸，連續三天是是否登陸，一周活躍天數等用戶 存在的挑戰 如果使用文件保存 會有如下問題： 文件分割變得十分麻煩 數據檢索非常不方便 用戶關聯操作複雜 如果使用資料庫表 會有如下問題： 使用redis點陣圖進行存儲（setbit ...
  • NoSQL資料庫淺析
    NoSQL(NoSQL = Not Only SQL )：非關係型的資料庫。NoSQL有時也稱作Not Only SQL的縮寫，是對不同於傳統的關係型資料庫的資料庫管理系統的統稱。 今天我們可以通過第三方平臺（如：Google,Facebook等）可以很容易的訪問和抓取數據。用戶的個人信息，社交網路 ...
  • CentOS7+mysql5.6配置主從
    一、安裝環境 MySQL在5.6之前和之後的安裝方式是不一樣的。 自己整理的mysql安裝，主從配置基於這篇安裝：http://www.cnblogs.com/cypress/p/8608496.html 首先保證3306埠的可用，或者關閉防火牆，兩台機子可以互相ping 二、Master的配置 ...
  • 翻譯：SET PASSWORD語句（已提交到MariaDB官方手冊）
    本文為mariadb官方手冊：SET PASSWORD的譯文。 原文：https://mariadb.com/kb/en/library/set-password/我提交到MariaDB官方手冊的譯文：https://mariadb.com/kb/zh-cn/set-password/ 語法 描述 ...
  • 從mysql全庫備份中恢復指定庫和指定表
    需求：開發要求導入某天某個表的數據，而我們的數據是全庫備份 例如： 從newbei_2017-08-31_402793782.tar.bz2中恢復表：bei_table 的數據 一、備份策略 備份全庫的數據：newbei 二、解壓 tar xvf newbei_2017-08-31_40279378 ...
  • CentOS7安裝mysql5.6
    在安裝MySQL時總會出現一些小問題，導致安裝進度過慢，在百度搜加上自己實際操作，總結的安裝方式，共同進步 一、安裝mysql 1、下載安裝包使用wget命令安裝 2、卸載自帶的Mariadb 3、刪除etc目錄下的my.cnf 4、執行以下命令來創建mysql用戶組 5、執行以下命令來創建一個用戶 ...
  • hadoop集群namenode同時掛datanode
    背景：（測試環境）只有兩台機器一臺namenode一臺namenode,但集群只有一個結點感覺不出來效果，在namenode上掛一個datanode就有兩個節點，弊端見最後 操作非常簡單（添加獨立節點參照：http://www.cnblogs.com/pu20065226/p/8493316.htm ...
  • 【讀書筆記】iOS-優化記憶體
    imageNamed:方法創建UIImage對象，這些對象不再使用的時候 會放到應用的預設自動回收池中，而不是當前的事件迴圈的自動回收池中，這樣的對象占用的記憶體只有在應用結束的時候 才會回收。如果用這種方法存放了很多在圖的話，你會發現應用會很快將整個記憶體好緊。另外，因為他們是自動回收的對象，所以，即 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類