如何使用React Native Part＃7构建WordPress应用：拉动刷新和无限滚动

最新推荐文章于 2024-10-05 08:45:32 发布

dfsgwe1231

最新推荐文章于 2024-10-05 08:45:32 发布

阅读量166

点赞数

文章标签： php json 移动开发

在这里，我们将实现拉动刷新，刷新将刷新并再次调用API以刷新主屏幕列表中的帖子。另外，我们将无限滚动添加到主屏幕的底部。无限滚动将触发对服务器的请求，服务器会将更多文章加载到列表中。

实施拉动刷新

首先，我们将实现拉动刷新。为此，我们需要定义一个名为isFetching的状态变量，该变量将处理刷新加载程序的隐藏和显示。 isFetching状态的定义如下面的代码片段所示：

  this .state = { 
         lastestpost :[],
         isFetching : false ,
      }

接下来，我们需要创建一个名为onRefresh（）的函数，该函数将在我们拉动刷新刷新触发器时触发。

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

在这里，我们将isFetching的状态更改为true，也称为
再次执行fetchLastestPost函数。通过对服务器进行API调用，这将导致帖子的重新获取。

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

并且，在fetchLastestPost函数中，我们还需要更改状态
isFetching为false以隐藏滚动加载器。

  async fetchLastestPost() {
        const response = await fetch(
          'https://kriss.io/wp-json/wp/v2/posts?per_page=5'
        );
        const post = await response.json();
        this .setState({ lastestpost : post, isFetching : false });
      }

因此，我们将在仿真器屏幕中获得以下结果：

如我们所见，当我们向下拖动列表时，微调器出现，并且刷新列表。

实现无限滚动

现在，我们将无限滚动添加到主屏幕的底部。这个想法是当我们滚动到底部时加载更多文章。为此，我们需要定义一个名为page的状态变量，该变量将处理我们从WordPress API获取的数据。

   this .state = {
          lastestpost : [],
          isFetching : false ,
          page : 1 ,
        };

届时，我们将创建一个名为handleLoadMore的新函数，并在FlatList的onEndReached事件中对其进行FlatList 。我们还配置了一些道具除了在FlatList如onEndReachedThreshold控制的功能触发基于我们是从列表的底部还有多远。下面的代码段提供了总体实现：

    onEndReached={ this .handleLoadMore}
    onEndReachedThreshold={ 0.1 }
    ListFooterComponent={ this .renderFooter}

现在，下面的代码片段中提供了handleLoadMore函数的实现：

  handleLoadMore = () => {
        this .setState(
          {
            page : this .state.page + 1 ,
          },
          () => {
            this .fetchLastestPost();
          },
        );
      };

在这里，我们增加了页面状态变量，然后再次调用了fetchLastestPost（）函数。

现在，我们还需要在API的获取中进行一些配置，该配置将基于页码，如下面的代码片段所示：

 async fetchLastestPost() {
        let page = this .state.page;
        const response = await fetch(
          `https://kriss.io/wp-json/wp/v2/posts?per_page=5&page= ${page} ` ,
        );
        const post = await response.json();
        this .setState({
          lastestpost : page === 1 ? post : [...this.state.lastestpost, ...post],
          isFetching : false ,
        });
      }

在这里，我们将页面添加到查询中以获取下一页。然后在获取之后，将其连接到lastestpost状态变量。

现在，为了添加无限滚动，我们需要使用react-native包中的ActivityIndicator组件。首先，我们需要将其导入，如下面的代码片段所示：

   import {View, Text, FlatList, ActivityIndicator} from 'react-native' ;

然后，我们需要实现一个名为renderFooter（）的新函数，该函数将根据isFetching状态返回由View组件包装的ActivityIndicator模板，该模板具有样式或不包含样式，如以下代码片段所示：

   renderFooter = () => {
        if ( this .state.isFetching) return null ;
        return (
          < View
            style = {{
              paddingVertical: 20 ,
              borderTopWidth: 1 ,
              borderColor: "# CED0CE "
            }}
          >
             <ActivityIndicator animating size="large" />
          </View> 
        );
      };

在此，如果未发送请求，则隐藏微调框。因此，我们将在仿真器屏幕中获得以下结果：

如我们所见，微调器出现，并将附加商品卡加载到列表中。

因此，我们已经成功完成了主屏幕列表的实现。现在，我们将为“ Single Post”创建模板。

摘要

在本章中，我们学习了如何在android和iOS中配置“刷新刷新”功能。最后，我们学习了如何设置无限加载器以触发加载更多功能，从而将其他文章加载到列表中。

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等。您可以在本系列中找到更多。本教程系列的灵感来自instamobile的React Native App模板

From: https://hackernoon.com/build-wordpress-app-with-react-native-7-pull-to-refresh-then-infinite-scroll-3b10t32uu