如何使用React Native Part＃10构建WordPress应用：保存书签功能

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

dfsgwe1231

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

阅读量304

点赞数

文章标签： php json ui

我们将学习如何为文章添加书签，以便稍后可以在“书签”屏幕中轻松访问它们。这个过程很简单。我们将在SinglePost屏幕上将帖子ID保存到Asyncstorage，然后在书签屏幕上获取文章。在这里，我们将书签图标添加到SinglePost屏幕并配置其功能。

但是首先，我们需要在SinglePost.js文件中定义一个状态为already_bookmark的状态变量，以处理书签启用或禁用图标的显示。为此，我们需要使用以下代码片段中的代码：

 constructor (props) {
        super (props);
        this .state = {
          isloading : true ,
          post : [],
          already_bookmark : false ,
        };
      }

然后，我们需要在屏幕上添加书签图标。为此，我们需要使用以下代码片段中的代码：

<List.Item
                 title={ `Published on ${moment(
                   post[ 0 ].date,
                   'YYYYMMDD' ,
                 ).fromNow()} ` }
                 right={props => {
                   if ( this .state.already_bookmark == true ) {
                     return (
                       < TouchableOpacity
                         onPress = {() => this.removeBookMark(post[0].id)}>
                          <FontAwesome name="bookmark" size={30} />
                       </TouchableOpacity> 
                     );
                   } else {
                     return (
                        <TouchableOpacity
                         onPress={() => this.saveBookMark(post[0].id)}>
                         <FontAwesome name="bookmark-o" size={30} />
                       </TouchableOpacity>
                     );
                   }
                 }}
               />

在这里，我们已经显示了基于
already_bookmark状态。该模板具有TouchableOpacity一个封装组件FontAwesome组件。在onPress事件中，我们调用了removeBookMark和saveBookMark函数。这些功能用于为文章添加书签或从文章中删除书签。

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

接下来，我们需要使用AsyncStorage组件中的
@ react-native-community / async-storage软件包。为此，我们需要先使用安装软件包。为了安装该软件包，我们需要从以下代码片段运行命令：

  yarn add @react-native-community/ async -storage

我们可以从以下位置获取信息以及安装说明：
包装文件。

现在，我们需要将此包导入到Bookmark.js文件中，如下面的代码片段所示：

 import AsyncStorage from '@react-native-community/async-storage' ;

保存书签

在这里，我们将实现saveBookMark函数。为此，我们需要首先定义函数，如下面的代码片段所示：

  saveBookMark = async post_id => {
        this .setState({ already_bookmark : true });
      };

在这里，我们以异步执行功能将参数作为发布ID。然后，我们将already_bookmark状态变量设置为true。

现在，我们需要将AsyncStorage书签的帖子的帖子ID保存到AsyncStorage 。为此，我们需要使用以下代码片段中的代码：

  saveBookMark = async post_id => {
             this .setState({ already_bookmark : true });
             let bookmark = [];
             bookmark.push(post_id);
             AsyncStorage.setItem( 'bookmark' , JSON .stringify(bookmark));

     };

在这里，我们定义了一个称为书签的新数组，并将post id值推入其中。然后，我们已经利用了的setItem功能AsyncStorage保存书签。我们已将书签数组另存为JSON值。

接下来，我们需要防止同一文章的书签重复。为此，我们需要使用以下代码片段中的代码：

  saveBookMark = async post_id => {
        this .setState({ already_bookmark : true });
        await AsyncStorage.getItem( 'bookmark' ).then( token => {
          const res = JSON .parse(token);
          if (res !== null ) {
            let data = res.find( value => value === post_id);
            if (data == null ) {
              res.push(post_id);
              AsyncStorage.setItem( 'bookmark' , JSON .stringify(res));
            }
          } else {
            let bookmark = [];
            bookmark.push(post_id);
             AsyncStorage.setItem( 'bookmark' , JSON .stringify(bookmark));
          }
        });
      };

在这里，我们获取书签数据，然后将其解析为一个名为res的数组。然后，如果我们有书签数据，我们将在post_id中搜索当前帖子。如果该帖子不存在于书签中，那么我们可以将其添加到书签中并防止重复的书签。第三种情况是针对尚未添加任何书签的用户。因此，我们通常可以使用saveBookMark函数来应用和保存书签。

摘要

在本章中，我们学习了如何使用AsyncStorage模块实现书签按钮的UI和功能。使用它，我们实现了保存方法的功能

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

From: https://hackernoon.com/build-wordpress-app-with-react-native-10-save-bookmark-vb26t32hn