在这里&＃xff0c;我们将实现从文章中删除书签。 这种情况比保存书签更简单。 在这里&＃xff0c;我们将定义一个称为removeBookMark的函数。 为此&＃xff0c;我们需要使用以下代码片段中的代码&＃xff1a;
removeBookMark &＃61; async post_id &＃61;> {this .setState({ already_bookmark : false });const bookmark &＃61; await AsyncStorage.getItem( &＃39;bookmark&＃39; ).then( token &＃61;> {const res &＃61; JSON .parse(token);return res.filter( e &＃61;> e !&＃61;&＃61; post_id);});await AsyncStorage.setItem( &＃39;bookmark&＃39; , JSON .stringify(bookmark));};
在这里&＃xff0c;我们已将already_bookmark的状态更改为false。 然后&＃xff0c;我们使用AsyncStorage模块的getItem函数获得了书本 。 然后&＃xff0c;我们解析对JSON的响应&＃xff0c;并将其存储在res常量中。 然后使用过滤器HOC&＃xff0c;我们从书签中删除帖子ID。 然后&＃xff0c;再次使用setItem将剩余值保存在书签数组中。
渲染书签
在这里&＃xff0c;我们将根据文章是否已添加书签来更改already_bookmark状态的值。 这个already_bookmark状态将处理在SinglePost屏幕中显示已添加书签或未添加书签的模板。 为此&＃xff0c;我们需要创建一个名为renderBookMark的新函数&＃xff0c;如下面的代码片段所示&＃xff1a;
renderBookMark &＃61; async post_id &＃61;> {await AsyncStorage.getItem( &＃39;bookmark&＃39; ).then( token &＃61;> {const res &＃61; JSON .parse(token);let data &＃61; res.find( value &＃61;> value &＃61;&＃61;&＃61; post_id);return data &＃61;&＃61; null? this .setState({ already_bookmark : false }): this .setState({ already_bookmark : true });});};
在此&＃xff0c;该函数将发布ID作为参数。 然后&＃xff0c;通过使用帖子ID&＃xff0c;我们使用AsyncStorage的getItem函数获得书签ID。 获得值之后&＃xff0c;我们对其进行解析&＃xff0c;然后检查书签数组中是否存在文章发布ID。 如果存在&＃xff0c;我们将already_bookmark状态设置为true&＃xff0c;否则将其设置为false。
然后&＃xff0c;我们需要在componentDidMount&＃xff08;&＃xff09;上调用此函数&＃xff0c;并将post id设置为我们从导航道具中获取的参数&＃xff0c;如下面的代码片段所示&＃xff1a;
componentDidMount() {this .fetchPost().then( () &＃61;> {this .renderBookMark( this .props.navigation.getParam( &＃39;post_id&＃39; ));});}
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
如我们所见&＃xff0c;我们已经在SinglePost屏幕中成功实现了书签功能。 现在&＃xff0c;我们可以为文章添加书签了。 但是&＃xff0c;我们还需要在某处显示加了书签的帖子。 我们将在Bookmark.js文件的Bookmark屏幕中执行此操作。
书签索引画面
在这里&＃xff0c;我们将实现“书签屏幕”以显示所有带有书签的文章。 我们已经在底部标签导航器中设置了“书签”屏幕的导航。 因此&＃xff0c;我们可以在下面的仿真器屏幕中看到“书签”&＃xff1a;
是的&＃xff0c;我们将显示与主屏幕类似的帖子。 我们将从服务器上获取加书签的帖子&＃xff0c;并将其显示为列表。
但是首先&＃xff0c;我们需要定义新的状态变量&＃xff0c;称为bookmark_post和isFetching 。 bookmark_post将存储我们从服务器获取的加书签的帖子。 并且&＃xff0c; isFetching状态用于显示加载程序。 它们的定义如下面的代码片段所示&＃xff1a;
class Bookmark extends Component {constructor (props) {super (props);this .state &＃61; {bookmark_post : [],isFetching : false ,};}
然后&＃xff0c;我们需要在Bookmark.js文件中导入AsyncStorage软件包&＃xff0c;如下面的代码片段所示&＃xff1a;
import AsyncStorage from &＃39;&＃64;react-native-community/async-storage&＃39; ;
然后&＃xff0c;我们需要从服务器获取加书签的帖子。 为此&＃xff0c;我们需要定义一个名为fetchBookMark的新函数&＃xff0c;如下面的代码片段所示&＃xff1a;
async fetchBookMark() {let bookmark &＃61; await AsyncStorage.getItem( &＃39;bookmark&＃39; ).then( token &＃61;> {const res &＃61; JSON .parse(token);if (res !&＃61; null ) {const result &＃61; res.map( post_id &＃61;> {return &＃39;include[]&＃61;&＃39; &＃43; post_id;});return result.join( &＃39;&&＃39; );} else {return null ;}});const response &＃61; await fetch(&＃96;https://kriss.io/wp-json/wp/v2/posts? ${bookmark} &＃96;);const post &＃61; await response.json();//this.setState({ posts: post });this .setState({ bookmark_post : post });}
在这里&＃xff0c;首先&＃xff0c;我们从AsyncStorage获取书签数据&＃xff0c;然后映射所有帖子ID&＃xff0c;以在WordPress API上构建查询字符串匹配项。 然后&＃xff0c;我们使用提取功能请求WordPress API并获得带书签的帖子的响应。 我们将响应解析为JSON&＃xff0c;然后将其设置为bookmark_post状态变量。
接下来&＃xff0c;我们将使用FlatList来显示文章列表&＃xff0c;就像在主屏幕中一样。 总体实现如下代码片段所示&＃xff1a;
componentDidMount() {this .fetchBookmark();}
render() {return ( Bookmark Post (this.props.navigation.navigate(&＃39;SinglePost&＃39;, {post_id: item.id,})}>Published on {moment(item.date).fromNow()})}keyExtractor&＃61;{item &＃61;> item.id}/>);}
}
我们需要记住&＃xff0c;要像在主屏幕中一样进行导入。 并且&＃xff0c;我们需要在componentDidMount挂钩中调用fetch函数。
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
在这里&＃xff0c;我们在“书签”屏幕上获得了带有书签的帖子列表。 但是&＃xff0c;当我们切换选项卡时&＃xff0c;我们会看到componentDidMount不会触发。 这不好&＃xff0c;因为书签可以每次更新。 如果不刷新“书签”屏幕&＃xff0c;则书签帖子不会更新。
因此&＃xff0c;在就此问题进行了头脑风暴之后&＃xff0c;我们可以在S tackOverflow中获得解决方案。 建议通过更新类触发didFocusevent 。 现在&＃xff0c;我们将按照文档中的内容进行配置。 首先&＃xff0c;我们需要进行以下导入&＃xff1a;
import {withNavigationFocus} from &＃39;react-navigation&＃39; ;
class Bookmark extends Component {
在这里&＃xff0c;我们进口withNavigationFocus从反应导航 。 然后&＃xff0c;我们需要在withNavigationFocus函数内部将导出默认值移到底部&＃xff0c;如下面的代码片段所示&＃xff1a;
export default withNavigationFocus(Bookmark);
并且&＃xff0c;对于侦听器事件&＃xff0c;我们将在componentDidMount使用它&＃xff0c;如下面的代码片段所示&＃xff1a;
componentDidMount() {const {navigation} &＃61; this .props;this .focusListener &＃61; navigation.addListener( &＃39;didFocus&＃39; , () &＃61;> {this .fetchBookmark();});}
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
如我们所见&＃xff0c;“书签”屏幕现在每次导航到书签时都会获取书签。
摘要
在本章中&＃xff0c;我们学习了如何删除和呈现书签。 然后&＃xff0c;利用AsyncStorage和访存方法&＃xff0c;我们成功访存了要加书签的帖子&＃xff0c;以显示在“书签”屏幕上。 最后&＃xff0c;我们学习了每次进入“书签”屏幕时如何重新获取带书签的帖子&＃xff0c;以便显示新的书签。
本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。 由于我的博客谈论的是本机反应&＃xff0c;因此该系列和文章相互联系。 我们将学习如何设置许多使我们的生活舒适的程序包&＃xff0c;并学习如何处理WordPress API。 在此&＃xff0c;本书中讨论的最突出的功能是深色主题&＃xff0c;脱机模式&＃xff0c;无限滚动等。 您可以在本系列中找到更多。 本教程系列的灵感来自instamobile的React Native App模板
From: https://hackernoon.com/build-wordpress-client-app-with-react-native-11-remove-bookmark-932ul32ud
京公网安备 11010802041100号