react-native
ListView के साथ RefreshControl

टिप्पणियों

नियंत्रण को ताज़ा करें

  _refreshControl(){
    return (
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={()=>this._refreshListView()} />
    )
  }

ताज़ा: स्पिनर की स्थिति (सच्ची, झूठी) है।

onRefresh: लिस्ट व्यू / स्क्रॉलव्यू को रिफ्रेश करने पर यह फंक्शन शुरू हो जाएगा।

onRefresh फ़ंक्शन उदाहरण

  _refreshListView(){
    //Start Rendering Spinner
    this.setState({refreshing:true})
    this.state.cars.push(
      {name:'Fusion',color:'Black'},
      {name:'Yaris',color:'Blue'}
    )
    //Updating the dataSource with new data
    this.setState({ dataSource:
        this.state.dataSource.cloneWithRows(this.state.cars) })
    this.setState({refreshing:false}) //Stop Rendering Spinner
  }

यहां हम ऐरे को अपडेट कर रहे हैं और उसके बाद हम डेटा स्रोत को अपडेट करेंगे। हम सर्वर से कुछ अनुरोध करने के लिए और async / प्रतीक्षा का उपयोग करने के लिए भ्रूण का उपयोग कर सकते हैं।

सूची दृश्य पूर्ण उदाहरण के साथ नियंत्रण को ताज़ा करें

RefreshControl को स्क्रॉल कार्यक्षमता में पुल जोड़ने के लिए एक स्क्रॉल दृश्य या सूची दृश्य के अंदर उपयोग किया जाता है। इस उदाहरण पर हम इसे ListView के साथ उपयोग करेंगे

'use strict'
import React, { Component } from 'react';
import { StyleSheet, View, ListView, RefreshControl, Text } from 'react-native'


class RefreshControlExample extends Component {
  constructor () {
    super()
    this.state = {
      refreshing: false,
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2 }),
      cars : [
        {name:'Datsun',color:'White'},
        {name:'Camry',color:'Green'}
      ]
    }
  }

   componentWillMount(){
     this.setState({ dataSource:
       this.state.dataSource.cloneWithRows(this.state.cars) })
   }

  render() {
    return (
      <View style={{flex:1}}>
        <ListView
          refreshControl={this._refreshControl()}
          dataSource={this.state.dataSource}
          renderRow={(car) => this._renderListView(car)}>
        </ListView>
      </View>
    )
  }

  _renderListView(car){
    return(
      <View style={styles.listView}>
        <Text>{car.name}</Text>
        <Text>{car.color}</Text>
      </View>
    )
  }

  _refreshControl(){
    return (
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={()=>this._refreshListView()} />
    )
  }

  _refreshListView(){
    //Start Rendering Spinner
    this.setState({refreshing:true})
    this.state.cars.push(
      {name:'Fusion',color:'Black'},
      {name:'Yaris',color:'Blue'}
    )
    //Updating the dataSource with new data
    this.setState({ dataSource:
        this.state.dataSource.cloneWithRows(this.state.cars) })
    this.setState({refreshing:false}) //Stop Rendering Spinner
  }

}

const styles = StyleSheet.create({

  listView: {
    flex: 1,
    backgroundColor:'#fff',
    marginTop:10,
    marginRight:10,
    marginLeft:10,
    padding:10,
    borderWidth:.5,
    borderColor:'#dddddd',
    height:70
  }

})

module.exports = RefreshControlExample