Javascript 实现pull以刷新平面列表

请帮我在我的应用程序上实现pull-to-refresh，我对react-native有点陌生，谢谢。我不知道如何处理刷新和刷新

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

类主屏幕扩展组件{
状态={刷新：错误}
_renderItem=（{item}）=>
_handleRefresh=（）=>{
};
render（）{
const{data}=this.props；
if（数据加载）{
返回(
)
}
返回(
项目.\u id}
renderItem={this.\u renderItem}
numColumns={3}
刷新={this.state.refreshing}
onRefresh={this.\u handleRefresh}
/>
);
}
}
导出默认图形QL（获取帖子和查询）（主屏幕）；

“拉入刷新”概念意味着列表可以手动刷新，因此可以在当前视图之外更改（例如从服务器获取）。因此，回调

onRefresh

必须触发数据重新加载过程（例如，向服务器发送请求），并将

refresh

变量设置为truthy值。这将通过显示加载指示器通知用户进程已启动。数据准备好后，您需要将刷新设置为falsy，以便视图将隐藏加载指示器。

这是我能做的最好的事情

---

当我把它拉下来时，它不会从服务器上重新提取数据。我正在运行由Apollo连接到应用程序的graphql服务器，我不知道如何在_getData（）函数中从服务器上获取数据

您还可以在

Flatlist

中使用

refreshControl

，

ScrollView

和任何其他列表组件

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

item.\u id}
renderItem={this.\u renderItem}
numColumns={3}
刷新控制={
}
/>

设置变量

this.state = { 
    isFetching: false,
}

创建刷新功能

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

在最后一组中，在平面列表中刷新和刷新

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

---

//在flatlist中表示要刷新的pull的示例代码。相应地修改

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

import React，{Component}来自“React”
从“react native”导入{文本、视图、样式表、平面列表、维度、图像、TouchableHighlight}
导出默认类Home extends组件{
建造师（道具）
{
超级（道具）；
此.state={
数据：[]，
性别：“，
isFetching:false，
}
}
组件willmount（）
{
this.searchRandomUser（）
}
onRefresh（）{
this.setState（{isFetching:true}，function（）{this.searchRandomUser（）}）；
}
searchRandomUser=async（）=>
{
const RandomAPI=等待取数（'https://randomuser.me/api/?results=20')
const APIValue=wait RandomAPI.json（）；
const APIResults=APIValue.results
console.log（APIResults[0]。电子邮件）；
这是我的国家({
数据：API结果，
isFetching:错误
})
}
render（）{
返回(
重新加载数据
这是一个.onRefresh（）}
刷新={this.state.isFetching}
keyExtractor={（项，索引）=>index.toString（）}
renderItem={（{item}）=>
电子邮件Id:{item.Email}
全名：{this.state.gender}{item.Name.first}{item.Name.last}
出生日期：{item.dob.age}
电话号码：{item.Phone}
}
/>
)
}
}
const deviceWidth=Dimensions.get（'window'）.width
const deviceHeight=维度.get（'window'）.height
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
玛金托普：22
},
ContainerView：
{
//背景颜色：'灰色'，
marginBottom:20，
填充垂直：10，
背景颜色：'#f5'，
边框底部宽度：0.5，
borderBottomColor:“灰色”，
宽度：设备宽度-40，
marginLeft:20，
marginRight:20，
玛金托普：20，
flexDirection:“行”
}
});

只需在滚动视图中使用即可，而不是在平面列表中使用“拉”刷新

设置刷新状态

this.state = { 
     isFetching: false,
  }

在ScrollView中设置为onFresh

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={this.state.refresh}
      onRefresh={() => this.onRefresh()}
      tintColor="red"
    />
  }>
  <FlatList data={data} renderItem={this._renderItem} numColumns={3} />
</ScrollView>;

---

如果在刷新时设置prop

onRefresh

，FlatList将自动设置

RefreshControl

，尽管它是默认设置。嘿@Krish我这样做了，但数据中的最后一项不会消失，当我拉刷新“加载”时，它会卡住，无法获取新数据@DevAS在调用reload函数之前清空数组（当您设置state blank array flatlist must reload时），并检查您的flatlist是否仍显示最后一项。我不明白您的意思：/您说在调用onRefresh时清空数组？@DevAS我的意思是清空数组（在我的示例中为“FlatListItems”），它必须刷新平面列表，并且不应显示最后一项。请共享代码，以便我可以查看。上述代码的示例，Thanks@RishavKumar，Link=>如果您将代码片段粘贴到这里，将非常有用。

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={this.state.refresh}
      onRefresh={() => this.onRefresh()}
      tintColor="red"
    />
  }>
  <FlatList data={data} renderItem={this._renderItem} numColumns={3} />
</ScrollView>;

  onRefresh() {
    this.setState({refresh: true});
    setTimeout(() => {
      this.setState({refresh: false});
    }, 2000);
  }

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

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