Implementar extracción para actualizar FlatList

por favor, ayúdenme a implementar pull para actualizar mi aplicación, soy un poco nuevo para reaccionar de forma nativa, gracias. No sé cómo manejar onRefresh y refrescante.

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);

Establecer variables

this.state = { 
    isFetching: false,
}

Crear función Actualizar

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

Y en el último conjunto onRefresh y refrescante en FlatList.

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

Después de obtener datos en la función getApiData, asegúrese de establecer falso isFetching.

this.setState({ isFetching: false })

También puedes usar refreshControl en Flatlist, ScrollViewy cualquier otro componente de la lista.

<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}
    />
  }
/>
    

// Ejemplo de código que representa la extracción para actualizar en flatlist. Modificar en consecuencia.

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'
        }
      });

Si alguien está interesado en hacerlo con React Hooks, aquí está:

Primero crea isRefreshing Expresar:

const [isRefreshing, setIsRefreshing] = useState(false)

Entonces crea tu onRefresh función que llama a la API para actualizar los datos:

const onRefresh = () => {
    //set isRefreshing to true
    setIsRefreshing(true)
    callApiMethod()
    // and set isRefreshing to false at the end of your callApiMethod()
}

Y después de eso, su FlatList componente que se ve así:

return (
    <FlatList
        style={styles.flatList}
        onRefresh={onRefresh}
        refreshing={isRefreshing}
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
    />
)

const [refreshing, setRefreshing] = useState(false)
    
 <FlatList
     style={{ padding: 15 }}
     refreshControl={
         <RefreshControl 
             refreshing={refreshing} 
             onRefresh={_onRefresh}
             tintColor="#F8852D"/>
     }
     showsVerticalScrollIndicator={false}
     data={listData}
     renderItem={renderItem}
     item={(item, index) => index.toStirng()}
     onEndReachedThreshold={0.8}
     onEndReached={() => onEndReached()}
     ListFooterComponent={() => renderFooter()}
 /> 

Función _onRefresh

const _onRefresh = () => {
    console.log('_onRefresh')
    setRefreshing(true);
    getPosts();
};

El concepto “Extraer para actualizar” implica que la lista se puede actualizar manualmente, por lo que se puede cambiar fuera de la vista actual (por ejemplo, obtenerla del servidor). Así que la devolución de llamada onRefresh tiene que activar el proceso de recarga de datos (por ejemplo, enviar una solicitud al servidor) y configurar el refreshing variable al valor de verdad. Esto notificará al usuario que el proceso se inició mostrando el indicador de carga. Una vez que tenga los datos listos, debe configurar refreshing a falso para que la vista oculte el indicador de carga.

esto es lo mejor que puedo hacer. mi imagen de código

cuando lo bajo, no recupera los datos del servidor. Estoy ejecutando el servidor graphql que se conectó con Apollo a la aplicación, y no sé cómo obtener datos del servidor en la función _getData().