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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類