Пожалуйста, помогите мне внедрить функцию pull to refresh в мое приложение, я немного новичок, чтобы реагировать на нативы, спасибо. Я не знаю, как справиться с onRefresh и обновлением.

class HomeScreen extends Component { state = { refreshing: false } _renderItem = ({ item }) ={amp}gt; {amp}lt;ImageGrid item={item} /{amp}gt; _handleRefresh = () ={amp}gt; { }; render() { const { data } = this.props; if (data.loading) { return ( {amp}lt;Root{amp}gt; {amp}lt;Loading size="large" /{amp}gt; {amp}lt;/Root{amp}gt; ) } return ( {amp}lt;Root{amp}gt; {amp}lt;HomeHeader /{amp}gt; {amp}lt;FlatList contentContainerStyle={{ alignSelf: 'stretch' }} data={data.getPosts} keyExtractor={item ={amp}gt; item._id} renderItem={this._renderItem} numColumns={3} refreshing={this.state.refreshing} onRefresh={this._handleRefresh} /{amp}gt; {amp}lt;/Root{amp}gt; ); } } export default graphql(GET_POSTS_QUERY)(HomeScreen); 

Установить переменную

  this.state = { isFetching: false, } 

Создать функцию обновления

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

И в последнем наборе onRefresh и обновление в FlatList.

  {amp}lt;FlatList data={ this.state.FlatListItems } onRefresh={() ={amp}gt; this.onRefresh()} refreshing={this.state.isFetching} 

После получения данных в функцию getApiData Убедитесь, что установлено false isFetching.

 this.setState({ isFetching: false }) 

Вы также можете использовать refreshControl в Flatlist ScrollView и любом другом компоненте списка

 {amp}lt;FlatList contentContainerStyle={{ alignSelf: 'stretch' }} data={data.getPosts} keyExtractor={item ={amp}gt; item._id} renderItem={this._renderItem} numColumns={3} refreshControl={ {amp}lt;RefreshControl refreshing={this.state.refreshing} onRefresh={this._handleRefresh} /{amp}gt; } /{amp}gt; 

Концепция «Pull to refresh» подразумевает, что список можно обновлять вручную, поэтому его можно изменять вне текущего представления (например, извлекать с сервера). Поэтому обратный вызов onRefresh должен инициировать процесс перезагрузки данных (например, отправить запрос на сервер) и установить для переменной обновления значение truey. Это уведомит пользователя, что процесс был запущен, показывая индикатор загрузки. Как только вы подготовили данные, вам нужно установить refreshing на ложное, чтобы в представлении скрывался индикатор загрузки.

это лучшее, что я могу сделать. мой код изображения

когда я опускаю его, он не перезагружает данные с сервера, я использую сервер graphql, который Apollo подключил к приложению, и я не знаю, как получить данные с сервера в функции _getData ().

// Пример кода, представляющего pull для обновления в flatlist. Изменить соответственно.

 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 () ={amp}gt; { 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 ( {amp}lt;View style = {styles.container}{amp}gt; {amp}lt;TouchableHighlight onPressOut = {this.searchRandomUser} style = {{width:deviceWidth - 32, height:45,backgroundColor: 'green',justifyContent:"center",alignContent:"center"}}{amp}gt; {amp}lt;Text style = {{fontSize:22,color: 'white',fontWeight: 'bold',textAlign:"center"}}{amp}gt;Reload Data{amp}lt;/Text{amp}gt; {amp}lt;/TouchableHighlight{amp}gt; {amp}lt;FlatList data={this.state.data} onRefresh={() ={amp}gt; this.onRefresh()} refreshing={this.state.isFetching} keyExtractor = { (item, index) ={amp}gt; index.toString() } renderItem={({item}) ={amp}gt; {amp}lt;View style = {styles.ContainerView}{amp}gt; {amp}lt;View{amp}gt; {amp}lt;Image source={{uri : item.picture.large}} style = {{height:100,width:100,borderRadius: 50,marginLeft: 4}} resizeMode='contain' /{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style = {{flexDirection: 'column',marginLeft:16,marginRight: 16,flexWrap:'wrap',alignSelf:"center",width: deviceWidth-160}}{amp}gt; {amp}lt;Text{amp}gt;Email Id : {item.email}{amp}lt;/Text{amp}gt; {amp}lt;Text{amp}gt;Full Name : {this.state.gender} {item.name.first} {item.name.last}{amp}lt;/Text{amp}gt; {amp}lt;Text{amp}gt;Date of birth : {item.dob.age}{amp}lt;/Text{amp}gt; {amp}lt;Text{amp}gt;Phone number : {item.phone}{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; } /{amp}gt; {amp}lt;/View{amp}gt; ) } } 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' } });