web-dev-qa-db-fra.com

Implémentation de pull pour rafraîchir la FlatList

aidez-moi s'il vous plaît à mettre en œuvre tirer pour rafraîchir mon application, je suis un peu nouveau pour réagir natif, merci Je ne sais pas comment gérer l'actualisation et le rafraîchissement.

class HomeScreen extends Component {
  state = { refreshing: false }

  _renderItem = ({ item }) => <ImageGrid item={item} />

  _handleRefresh = () => {

  };

  render() {
    const { data } = this.props;
    if (data.loading) {
      return (
        <Root>
          <Loading size="large" />
        </Root>
      )
    }
 return (
   <Root>
     <HomeHeader />
     <FlatList
       contentContainerStyle={{ alignSelf: 'stretch' }}
       data={data.getPosts}
       keyExtractor={item => item._id}
       renderItem={this._renderItem}
       numColumns={3}
       refreshing={this.state.refreshing}
       onRefresh={this._handleRefresh}
     />
   </Root>
  );
 }
}

export default graphql(GET_POSTS_QUERY)(HomeScreen);
javascriptreact-nativeexpo
9
petros

Définir variable 

  this.state = { 
     isFetching: false,
  }

Créer une fonction d'actualisation

  onRefresh() {
     this.setState({ isFetching: true }, function() { this.getApiData() });
  }

Et en dernière position surRefresh et rafraîchissant dans FlatList.

  <FlatList
      data={ this.state.FlatListItems }
      onRefresh={() => this.onRefresh()}
      refreshing={this.state.isFetching}

Après l'extraction des données dans la fonction getApiData Assurez-vous de définir false isFetching.

this.setState({ isFetching: false })
20
krish

vous pouvez également utiliser refreshControl dans Flatlist ScrollView et tout autre composant de liste 

<FlatList
       contentContainerStyle={{ alignSelf: 'stretch' }}
       data={data.getPosts}
       keyExtractor={item => item._id}
       renderItem={this._renderItem}
       numColumns={3}
       refreshControl={
          <RefreshControl
           refreshing={this.state.refreshing}
           onRefresh={this._handleRefresh}
          />
        }
     />
1
Jigar

Le concept "Tirer pour actualiser" implique que la liste peut être rafraîchie manuellement et peut donc être modifiée en dehors de la vue actuelle (par exemple, extraite du serveur). Ainsi, le rappel onRefresh doit déclencher le processus de rechargement des données (par exemple, envoyer une demande au serveur) et définir la variable refreshing sur la valeur vérité. Cela informera l'utilisateur que le processus a été lancé en affichant l'indicateur de chargement. Une fois que vous avez préparé les données, vous devez définir refreshing sur falsy afin que l'affichage vienne masquer l'indicateur de chargement.

0
teivaz

// Exemple de code représentant l'extraction dans la flatlist. Modifier en conséquence. 

import React, { Component } from 'react'
    import { Text, View,StyleSheet,FlatList,Dimensions,Image,TouchableHighlight } from 'react-native'

    export default class Home extends Component {

        constructor(props) 
        {
            super(props);
        this.state = {
            data : [],
            gender : "",
            isFetching: false,
        }
        }

    componentWillMount()
    {

        this.searchRandomUser()
    }

    onRefresh() {
        this.setState({ isFetching: true }, function() { this.searchRandomUser() });
     }

    searchRandomUser = async () =>
    {
       const RandomAPI = await fetch('https://randomuser.me/api/?results=20')
       const APIValue = await RandomAPI.json();
        const APIResults = APIValue.results
          console.log(APIResults[0].email);
          this.setState({
              data:APIResults,
              isFetching: false
          })

    }

      render() {
        return (
          <View style = {styles.container}>
     <TouchableHighlight
     onPressOut = {this.searchRandomUser}
         style = {{width:deviceWidth - 32, height:45,backgroundColor: 'green',justifyContent:"center",alignContent:"center"}}>
              <Text style = {{fontSize:22,color: 'white',fontWeight: 'bold',textAlign:"center"}}>Reload Data</Text>
         </TouchableHighlight>
     <FlatList
            data={this.state.data}
            onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
            keyExtractor = { (item, index) => index.toString() }
            renderItem={({item}) =>
            <View style = {styles.ContainerView}>
            <View>
    <Image
    source={{uri : item.picture.large}}
    style = {{height:100,width:100,borderRadius: 50,marginLeft: 4}}
    resizeMode='contain'
    />
    </View>

    <View style = {{flexDirection: 'column',marginLeft:16,marginRight: 16,flexWrap:'wrap',alignSelf:"center",width: deviceWidth-160}}>
    <Text>Email Id : {item.email}</Text>

    <Text>Full Name : {this.state.gender} {item.name.first} {item.name.last}</Text>
    <Text>Date of birth : {item.dob.age}</Text>
    <Text>Phone number : {item.phone}</Text>

    </View>

    </View>
            }
            />
          </View>
        )
      }
    }
    const deviceWidth = Dimensions.get('window').width
    const deviceHeight = Dimensions.get('window').height
    const styles = StyleSheet.create({
        container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          marginTop:22
        },
        ContainerView:
        {
            // backgroundColor:'grey',
            marginBottom:20,
            paddingVertical:10,
            backgroundColor: '#F5F5F5',

            borderBottomWidth:0.5,
            borderBottomColor:'grey',
            width: deviceWidth-40,
            marginLeft:20,
            marginRight:20,
            marginTop:20,
            flexDirection:'row'
        }
      });
0
Rishav Kumar