PullToRefreshViewAndroid pull-down refresh component of React Native Control

PullToRefreshViewAndroid pull-down refresh component of React Native Control
(1) Preface

Today, let's take a look at the PullToRefreshViewAndroid pull-down refresh component and usage examples.

The newly created React Native technology exchange group (282693535). You are welcome to join us! At the same time, on the left side of the blog, you are welcome to scan the subscription number, mobile technology, and technology push!

The PullToRefreshViewAndroid view encapsulates the drop-down refresh component (SwipeRefreshLayout) of the Android platform. This component supports setting a single scroll subview (for example, ScrollView ). When the vertical offset scrollY: 0 of the internal subview, The onRefresh event method is triggered when you drag the view with your finger down.

[Note]. The component style must be set to {flex: 1 }. When the subview we scroll is ScrollView or ListView.

(2) attribute Methods

1. inherit all styles that can use the View component (View: http://facebook.github.io/react-native/docs/view.html)

2. Set colors [ColorPropType] to set the color of the drop-down refresh loading progress indicator. You can set multiple colors (up to four)

3. enabled bool: Set whether to enable the pull-down refresh function

4. progressBackgroundColorColorPropType setting drop-down refresh the background color of the loaded indicator

5. refreshing bool sets whether the current incoming indicator is active or not, and whether the current status is refreshed from the drop-down list.

6. sizeRefreshLayoutConsts. SIZE. DEFAULT pull-down refresh indicator SIZE. For details, see the PullToRefreshViewAndroid. SIZE value (click to enter)

(3) Use instances

The above section describes the basic introduction of PullToRefreshAndroidView and related attributes. Next we will use an instance to demonstrate the specific use of this component.

The instance is modified from the official instance. The Code is as follows:

 

'Use strict '; const React = require ('react-native'); const {AppRegistry, ScrollView, StyleSheet, PullToRefreshViewAndroid, Text, View, }= 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 (
           
  
   
{This. props. data. text}
          
 ) ;},}); ConstPullToRefreshDemo = React. createClass ({getInitialState () {return {isRefreshing: false, loaded: 0, rowData: Array. from (new Array (20 )). map (val, I) => ({text: 'initial line' + I}), };}, render () {const rows = this. state. rowData. map (row, ii) => {return
 
  
;}); Return (
          
   
    
{Rows}
   
  ) ;}, _ OnRefresh () {this. setState ({isRefreshing: true}); setTimeout () =>{// prepare 5 new data const rowData = Array. from (new Array (5 )). map (val, I) => ({text: 'pull-down refresh row' + (+ this. state. loaded + I )})). concat (this. state. rowData); this. setState ({loaded: this. state. loaded + 5, isRefreshing: false, rowData: rowData,}) ;}, 5000) ;},}); AppRegistry. registerComponent ('pulltorefreshdemo', () => PullToRefreshDemo );
 

 

The specific running effect is as follows:

 

(4) Conclusion

Today, we will take a look at the basic introduction of the PullToRefreshAndroidView component and how to use it as an example. If you have any questions, add a group of React Native technical exchange groups (282693535) or reply below.