Expo Big Battle (34)--expo SDK API LinearGradient (linear gradient), keepawake (keep the screen not hibernating), Intentlauncherandroid,gyroscope,

Brief: This series of articles will be a comprehensive introduction to the Expo, I contact the Expo since June 2017, the study of the Expo intermittent, all the way to nearly 10 months, nonsense not to say, next you see the content, speak all to the official website

I guess go all machine turn + personal modification supplement +demo test form, to the expo to do a big blood! Welcome to join the Expo Interest Learning Exchange Group: 597732981

"Before I wrote some columns about Expo and RN entry configuration for East I west, you can click here to view: from zero learning RN development"

Related articles:

Expo Big Battle (a)--what is the expo, how to install Expo Clinet and xde,xde how to use

Expo Big Battle (ii)--expo life cycle, Expo Community exchanges, Expo learning necessary resources, the development of the use of the expo concerns some issues

Expo Big Battle (iii)--to the development of react native project developers have targeted the introduction of the limitations of Expo,expo, the development of project selection points of attention, etc.

Expo Big Battle (Iv.)--Rapid use of Expo to build a key term in a App,expo

Expo Big Battle (v) configuration information for App.json files in--expo

Expo Big Battle (vi)--EXPO Development mode, Expo in the EXP Command line tool, Expo How to view the debug mode in the log Log,expo

Expo Big Battle (vii)--expo How to use Genymotion simulator

Expo Big Battle (eight)--expo in the Publish and Expo link, to link this piece of things not detailed see, we can come to communicate with me

More >>

Written in chapter 23 after the words, before the translation, no matter how, good and bad, after all, is the end of the expo, but also the basic theory of the things in-depth understanding again, the following Expo big Battle series will mainly introduce the Expo SDK API.

LinearGradient

Renders the react component of the gradient view.

Import React from 'react'; import {Text, View} from 'react-native'; import {lineargradient} from 'Expo'; exportdefault classFacebookbutton extends React.component {render () {return (      <view style={{Flex:1, Alignitems:'Center', Justifycontent:'Center'}}> <lineargradient Colors={['#4c669f','#3b5998','#192f6a']} style={{padding: the, Alignitems:'Center', Borderradius:5}}> <Text Style={{backgroundcolor:'Transparent', FontSize: the, Color:'#fff',            }}> SigninchWith Facebook</Text> </LinearGradient> </View>    ); }}

Import React from 'react'; import {View} from 'react-native'; import {lineargradient} from 'Expo'; exportdefault classBlackfade 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: -,          }} /> </View>    ); }}

expo.lineargradientProps

Color
Represents the array of colors that are stopped in the gradient. You need at least two colors (otherwise it's not a gradient, it's just a fill!) ）。

Start
An array of [X, Y], where x and y are floating-point numbers. They represent where the gradient begins, as part of the overall size of the gradient. For example, [0.1,0.1] indicates that the gradient will start at the top 10%, starting from the left 10%.

End
The same as the beginning, but the gradient ends.

End
An array of the same length as the color, where each element is a floating element with the same meaning as the start and end values, but they indicate where the color at that index should be located.

Keepawake

A react component that prevents the screen from hibernating while rendering. It also exposes static methods for direct control of behavior.

For example: Components

Import React from 'react'; import {Text, View} from 'react-native'; import {Keepawake} from 'Expo'; exportdefault classKeepawakeexample extends React.component {render () {return (      <view style={{Flex:1, Alignitems:'Center', Justifycontent:'Center'}}> <keepawake/> <text>this screen would never sleep!</text> </View>    ); }}

Example:static methods

Import React from 'react'; import {Button, View} from 'react-native'; import {Keepawake} from 'Expo'; exportdefault classKeepawakeexample 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

Provides a way to start Android intents. For example-open a specific settings screen. (Provides a-launch Android intents. e.g.-opening a specific Settings screen.)

Usage

Expo.IntentLauncherAndroid.startActivityAsync(activity, data)

Begins the specified activity. You can specify optional data parameters to pass other data objects to the activity. The method returns a commitment that resolves when the user returns to the application.

There are several predefined constants available for the active parameter. You can find them in expo/expo-sdk/src/intentlauncherandroid.js.

Cases

 from ' Expo ' ; // Open Location Settings Intentlauncherandroid.startactivityasync (  intentlauncherandroid.action_location_source_settings);

Gyroscope

Access the device Guroscope sensor to respond to rotational changes in three-dimensional space.

Expo.Gyroscope.addListener(listener)

Subscribe to gyroscope updates.

Parameters
Listener (function)-The callback function that is called when the gyroscope update is available. When invoked, the listener is provided with a single parameter that contains the object with the key x, Y, Z.

Return
A Eventsubscription object that you can call remove () when you want to unsubscribe from the listener.

Expo.Gyroscope.removeAllListeners ()
Delete all listeners.

Expo.Gyroscope.setUpdateInterval (Intervalms)
Subscribe to gyroscope updates.

Parameters
Intervalms (number)-The expected interval (in milliseconds) between gyroscope updates.

Import React from 'react'; import {Gyroscope,} from 'Expo'; import {StyleSheet, Text, touchableopacity, View} from 'react-native'; exportdefault classGyroscopesensor extends React.component { state={gyroscopedata: {},} componentdidmount () { This. _toggle (); } componentwillunmount () { This. _unsubscribe (); } _toggle= () + = {    if( This. _subscription) {       This. _unsubscribe (); } Else {       This. _subscribe (); }} _slow= () + ={gyroscope.setupdateinterval ( +); } _fast= () + ={gyroscope.setupdateinterval ( -); } _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> </touchableo Pacity> <touchableopacity onpress={ This. _fast} style={styles.button}> <Text>Fast</Text> </TouchableOpacity> </ View> </View>    ); }}function round (n) {if(!N) {return 0; }  returnMath.floor (n * -) / -;}ConstStyles =stylesheet.create ({container: {flex:1}, Buttoncontainer: {flexdirection:'Row', Alignitems:'Stretch', MarginTop: the,}, Button: {flex:1, Justifycontent:'Center', Alignitems:'Center', BackgroundColor:'#eee', padding:Ten,}, Middlebutton: {borderleftwidth:1, borderRightWidth:1, BorderColor:'#ccc',}, sensor: {margintop: the, Paddinghorizontal:Ten,  },});

The next one goes on, this article mainly introduces: Expo SDK API LinearGradient (linear gradient), keepawake (keep the screen not sleeping), Intentlauncherandroid,gyroscope(magnetic sensor),Lottie (animated)! , you are welcome to pay attention to my public number, this article is approved by everyone, my measure is the public number of fans increase number. Welcome to reprint, but must keep my blog link!

Expo Big Battle (34)--expo SDK API LinearGradient (linear gradient), keepawake (keep the screen not hibernating), Intentlauncherandroid,gyroscope,