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

標籤：   rem   修改   ace   圖片   sleep   state   安裝   div   

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

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 settingsIntentLauncherAndroid.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（動畫）！，歡迎大家關注我的公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人部落格連結！

 

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