wake-up-neo.com

Implementieren Sie Pull zum Aktualisieren von FlatList

bitte helfen Sie mir, Pull zu implementieren, um die App zu aktualisieren. Ich weiß nicht, wie ich mit Neuladen und Erneuern umgehen soll.

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

Variable setzen 

  this.state = { 
     isFetching: false,
  }

Aktualisierungsfunktion erstellen

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

Und im letzten Set onRefresh und Refreshing in FlatList.

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

Nach dem Abrufen von Daten in der Funktion getApiData Stellen Sie sicher, dass false isFetching gesetzt ist.

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

refreshControl kann auch in Flatlist ScrollView und in jeder anderen Listenkomponente verwendet werden 

<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

Das Konzept "Zum Aktualisieren ziehen" impliziert, dass die Liste manuell aktualisiert werden kann und somit außerhalb der aktuellen Ansicht (z. B. vom Server abgerufen) geändert werden kann. Der Callback onRefresh muss also den Datenwiederladevorgang auslösen (z. B. eine Anforderung an den Server senden) und die Variable refreshing auf den wahrheitsgemäßen Wert setzen. Dadurch wird der Benutzer über den Ladekennzeichen informiert, dass der Prozess gestartet wurde. Sobald Sie die Daten bereitgestellt haben, müssen Sie refreshing auf Falsy setzen, damit die Ansicht das Ladekennzeichen ausblenden wird.

0
teivaz

// Beispielcode, der Pull zum Aktualisieren in der Flachliste darstellt. Ändern Sie entsprechend. 

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