React native control pulltorefreshviewandroid drop-down Refresh component explained

Reprint please indicate the source:

http://blog.csdn.net/developer_jiangqq/article/details/50664323

This article is from: "Jiang Qing's blog"

( i ) preface

Today, let's take a look at the pulltorefreshviewandroid drop-down refresh Component Tutorial and usage examples

          the newly createdReact NativeTechnology Exchange Group(282693535),welcome you, Daniel .,ReactNativeTechnology enthusiasts join the Exchange!at the same time blog left welcome scan attention to the subscription number,Mobile Technology Dry,exciting article Technology push!

          thepulltorefreshviewandroidThe view is encapsulatedAndroidplatform drop-down refresh component(swiperefreshlayout), the component supports setting a single, scrollable child view(For example: ScrollView). Offset in the vertical direction of the inner child viewscrolly:0When the finger is dragged down the view, the back triggerOnrefreshThe event method.

[ note ]. the component style needs to be set to {flex:1} . When we scroll the sub-view as ScrollView or ListView.

( two ) attribute method

1.followingcan makewithViewComponentsof theAllStyle(Specific view:Http://facebook.github.io/react-native/docs/view.html#style)

2.colors[colorproptype] set a drop-down refresh to load the color of the progress indicator, you can set multiple colors ( set of up to four )

3.enabled BOOL set whether to start the drop-down refresh feature

4.Progressbackgroundcolor colorproptype settings drop-down refresh the background color of the load indicator

5.Refreshing bool to set the current in indicator is active, also indicates whether the current is not in the drop-down refresh state

            6. size   refreshlayoutconsts.size.default   drop-down refresh indicator size, see pulltorefreshviewandroid.size ( Click to enter )

( three ) Examples of use

The basic introduction and related properties of PulltorefreshandroidView are described above. Let's use an example to illustrate the specific use of the component.

The instance is modified from the official instance, and the code is as follows :

' Use strict '; Const React =require (' react-native '); const {appregistry, ScrollView, StyleSheet, Pulltorefreshviewandroid, Text, Vi EW,} = React; Const styles =stylesheet.create ({row: {bordercolor: ' Red ', Borderwidth:2, padding:20, BackgroundColor: ' #  3ad734 ', Margin:5,}, Text: {alignself: ' center ', Color: ' #fff ',}, layout: {flex:1,}, ScrollView: {flex:1,},}), const Row =react.createclass ({render:function ()} {return (<view STYLE={STYLES.ROW}&G          T  <text style={styles.text}> {this.props.data.text} </Text> </View>); },}); Constpulltorefreshdemo = React.createclass ({getinitialstate () {return {isrefreshing:false, loaded:  0, RowData:Array.from (new Array). Map ((val, i) = = ({text: ' initial line ' + i}),};    }, Render () {Const rows = This.state.rowData.map ((row,ii) = {return <row key={ii} Data={row}/>;   }); Return (<pulltorefreshviewandroid style={styles.layout} refreshing={this.state.isrefreshing} Onrefresh={this._onrefresh} colors={[' #ff0000 ', ' #00ff00 ', ' #0000ff ', ' #123456 ']} progressbackgroundcolor={' #ffffff '} > <ScrollViewstyle={styles.scrollview}> {rows} </ScrollView> &  lt;/pulltorefreshviewandroid>);    }, _onrefresh () {this.setstate ({isrefreshing:true}); SetTimeout (() = {//Prepare 5 new data for const ROWDATA = Array.from (New Array (5)). Map ((val, i) = ({t       Ext: ' Drop-down refresh line ' + (+this.state.loaded + i)}). Concat (This.state.rowData);    This.setstate ({loaded:this.state.loaded + 5, Isrefreshing:false, Rowdata:rowdata,});  }, 5000); },}); Appregistry.registercomponent (' Pulltorefreshdemo ', () = Pulltorefreshdemo);

specific operating results are as follows :

( four ) Final summary

           Today we mainly study the pulltorefreshandroidview components of the basic introduction and demonstration use. You have a problem. react Native technical Exchange Group ( Span style= "Font-family:calibri;color: #E84C22" lang= "ZH-CN" >282693535

respect the original, reproduced please specify: from Sky, Clear ( HTTP://BLOG.CSDN.NET/DEVELOPER_JIANGQQ ) infringement must investigate!

Follow my subscription number (codedev123), Share mobile development Technology (ANDROID/IOS), project management, and blog posts every day! (Welcome attention, the first time to push the wonderful article)

Follow my Weibo to get more content

React native control pulltorefreshviewandroid drop-down Refresh component explained