React native Components ScrollView and StatusBar and Tabbarios

The component ScrollView in React native is similar to Uiscrollview in iOS, and its basic usage and familiarity are as follows:

/** * Sample React Native App * https://github.com/facebook/react-native * Week less stop ScrollView Common Properties * 2016-09-19 */import REAC T, {Component} from ' react '; import {appregistry, StyleSheet, Text, ScrollView, Alertios, View} from ' React-native  var Dimensions = require (' Dimensions '); var {width,height} = dimensions.get (' window '); class Project extends Component { Render () {return (<view style={styles.container}> <scrollview horizontal={true}//Arrange           Direction: Horizontal Default False Portrait Showshorizontalscrollindicator={false}//Hide horizontal line Pagingenabled={true}//Page slip ios// Scrollenabled={false}//whether scrolling iOS Bounces={false}//Close Spring effect iOS onscrollbegindrag={() =>this.beg Indrag ()}//starts sliding when calling onscrollenddrag={() =>this.enddrag ()}//End sliding call onmomentumscrollend={() =>this.m Omentumscroll ()}//call > {This.renderchildview ()} </ScrollView> &LT;/VIEW&G when a frame is finished sliding    T  ); } RENDERCHILDVIew () {//array var allchild = [];    var colors = [' Red ', ' blue ', ' yellow ', ' cyan ', ' Purple ']; Traverse for (var i=0; i<5;i++) {Allchild.push (//Load <view Key={i} Style={{backgroundcolor:colors[i],widt    h:width,height:120}}> <Text>{i}</Text> </View>);  }//returns return allchild;  } BeginDrag () {//Alertios.alert (' Start sliding ');  } EndDrag () {//Alertios.alert (' sliding end '); } momentumscroll () {//Alertios.alert (' One Frame end ')}}const styles = Stylesheet.create ({}); Appregistry.registercomponent (' Project ', () = project);

Demo:

/** * Sample React Native App * https://github.com/facebook/react-native * Week less Stop ScrollView demo * 2016-09-20 *///First import the Timer class library: Terminal: CD project root directory//NPM i react-timer-mixin--save//noinspection jsunresolvedvariableimport react, {Component} from ' React '; import {appregistry, StyleSheet, Text, ScrollView, Image, View} from ' react-native ';//introduction of the Timer class library Var timermixin = Require (' react-timer-mixin ');//introduction of JSON data var ImageData = require ('./imagetitlejson.json ');//introduction of Dimensionsvar  Dimensions = require (' Dimensions '); var width = dimensions.get (' window '). Width;var Project = React.createclass ({mixins:     [Timermixin],//Register Timer//Set fixed value Getdefaultprops () {return{//time interval duration:2000}},    Set the initial and variable values of the page//default first page Select Getinitialstate () {return {///current page currentpage:0}; }, Render () {return (<view style={styles.container}> <scrollview ref= "Scrol    LView "Style={styles.scrollviewstyle}                        Horizontal={true}//horizontal arrangement Pagingenabled={true}//Page slip onmomentumscrollend={(e) =>this.onanimationend (E)}//A frame end callback, removing () means passing the component as a parameter ONSCR Ollbegindrag={this. BeginDrag}//Start dragging to stop the timer onscrollenddrag={this.                EndDrag}//Stop drag to start timer > {this.readerallimage ()} </ScrollView>                {/* return six dots */} <view style={styles.pageviewstyle}> {this.renderpage ()}    </View> </View>);    }, BeginDrag () {//Stop timer this.clearinterval (This.timer);    }, EndDrag () {//Turn on Timer this.starttimer ();    },//implement some complex operation Componentdidmount () {//Turn on Timer this.starttimer ();        },//Implement Timer Starttimer () {//get scrollView var scrollView = This.refs.scrollView; var imgsarr = Imagedata.data;        Add Timer This.timer = This.setinterval (function () {//set dot var activepage = 0;            Determine if ((this.state.currentpage+1) >= imgsarr.length) {//out of bounds activepage = 0;            }else{ActivePage = this.state.currentPage + 1;            }//Update state machine this.setstate ({currentpage:activepage});            Let Scorllview move. var OffsetX = activepage * width;        Scrollview.scrollresponderscrollto ({x:offsetx,y:0,animation:true});    },this.props.duration);        },//Return picture Readerallimage () {//array var allimage = [];        Get the picture array var imgsarr = Imagedata.data;            Traverse for (var i=0; i);    }//Returns an array of return allimage;        },//Return dot Renderpage () {//define an array to place all the dots var indicatorarr = [];        Get the picture array var imgsarr = Imagedata.data;        Dot color style var style; Traverse for (var i = 0;i </text>);    } return Indicatorarr;        },//At the end of a frame, call Onanimationend (e) {//To find the offset in the horizontal direction var OffSetX = E.nativeevent.contentoffset.x;        Find out the current page var currentpage = Math.floor (offsetx/width);     Update the state machine, modify the drawing UI This.setstate ({currentpage:currentpage}); }}); Const styles = Stylesheet.create ({container:{margintop:20}, scrollviewstyle:{}, Pageviewstyle: {width:w Idth, height:25, backgroundColor: ' Rgba (0,0,0,0) ', Position: ' absolute ',//absolute positioning bottom:0, bottom:0, flexdirection: ' Row ',//spindle direction Alignitems : ' Center '}}); Appregistry.registercomponent (' Project ', () = project);

React Native StatusBar related properties, some other properties are limited to Android, some properties are limited to iOS, see React Native Chinese network

/** * Sample React Native App * https://github.com/facebook/react-native * Week less stop 2016-09-27 * statusbar status bar * **/import React {Component} from ' react '; import {appregistry, StyleSheet, Text, View, StatusBar,} from ' react-native ';                Class Project extends component{render () {return (<view style={styles.container}> <statusbar//hidden = {true}//status Show and hide//backgroundcolor = ' Red '//s Tatus column background color, only support Android//translucent = {true}//Set status bar is transparent effect, only support Android//Barstyle = ' light- Content '//Set status bar text effect, iOS only, enum type: Default Black light-content White networkactivityindicatorvisible = {true}//Set state Bar above the network progress Chrysanthemum, only support iOS showhidetransition = ' slide '//Explicit animation effect. Default Fade/> </v    iew>); }}const styles = stylesheet.create ({container: {flex:1, justifycontent: ' Center ', Alignitems: ' CenTer ', backgroundcolor: ' #F5FCFF ',}}); Appregistry.registercomponent (' Project ', () = project);

The Tabbarios in the

React native is the Uitabbarcontroller in iOS, where the Tabbarios is only available for iOS and third-party libraries are available if Android is required.

/** * Sample React Native App * https://github.com/facebook/react-native * Week less stop tabbarios Tabbarios.item * 2016-09-22 */im Port React, {Component} from ' React '; import {appregistry, StyleSheet, Text, Tabbarios, View} from ' react-native '; v Ar Project = React.createclass ({//Set initial value Getinitialstate () {return{//default Check first item Selectedtabbaritem: ' Home '}, Render () {return (<view style={styles.container}> <tabbarios bartintcolor= ' black ')          ; <tabbarios.item systemicon= "Bookmarks" badge= "3" selected = {This.state.selectedTabBar Item = = ' Home '} onpress = {() =>{this.setstate ({selectedtabbaritem: ' Home '}}} > <v Iew style={[styles.commonviewstyle,{backgroundcolor: ' Red '}]}> <Text> home </Text> < /view> </TabBarIOS.Item> <tabbarios.item systemicon= "More" selecte D = {This.staTe.selectedtabbaritem = = ' Second '} onpress = {() =>{this.setstate ({selectedtabbaritem: ' Second '}}} > <view style={[styles.commonviewstyle,{backgroundcolor: ' Yellow '}]}> <Text> second page &lt ;/text> </View> </TabBarIOS.Item> <tabbarios.item systemicon= " Downloads "selected = {This.state.selectedTabBarItem = = ' three '} onpress = {() =>{this.setstat E ({selectedtabbaritem: ' Three '}}} > <view style={[styles.commonviewstyle,{backgroundcolor: ' Cyan '}]}> <Text> third page </Text> </View> </TabBarIOS.Item> <              Tabbarios.item//systemicon= "contacts" icon = {require ('./1.png ')} badge= "6" Selected = {This.state.selectedTabBarItem = = ' Four '} onpress = {() =>{this.setstate ({Selectedtabbar        Item: ' Four '}}}  > <view style={[styles.commonviewstyle,{backgroundcolor: ' Blue '}]}> <Text> fourth page </  text> </View> </TabBarIOS.Item> </TabBarIOS> </View>); }}); Const styles = Stylesheet.create ({container:{flex:1, backgroundcolor: ' #f5fcff ',}, commonviewstyle:{fle X:1, justifycontent: ' Center ', Alignitems: ' Center '}}); Appregistry.registercomponent (' Project ', () = project);

　　

　

Full source Download: https://github.com/pheromone/React-Native-1

React native Components ScrollView and StatusBar and Tabbarios