现在&＃xff0c;我们需要在列表上显示整个帖子的摘录。 为此&＃xff0c;我们将使用react-native-render-html包中的组件。 并且&＃xff0c;我们还需要显示文章的发布日期。 为此&＃xff0c;我们要充分利用当下包&＃xff0c;它提供了moment.js配置。 为了使用这些软件包&＃xff0c;我们需要先安装它们。 为此&＃xff0c;我们需要使用以下代码片段中的命令&＃xff1a;
yarn add react-native-render-html moment
安装后&＃xff0c;我们需要记住将它们链接到本机项目&＃xff0c;就像在先前的安装中所做的那样。
现在&＃xff0c;我们需要将两个软件包都导入Home.js文件中&＃xff0c;如下面的代码片段所示&＃xff1a;
import HTMLRender from &＃39;react-native-render-html&＃39;
import moment from &＃39;moment&＃39;
现在&＃xff0c;我们将在Card模板中使用HTMLRender组件和moment组件&＃xff0c;如下面的代码片段所示&＃xff1a;
{item.title.rendered} Published on {moment(item.date).fromNow()}source &＃61; {{ uri: item.jetpack_featured_media_url }}/>
在这里&＃xff0c;我们使用了HTMLRender组件&＃xff0c;以便使用html格式显示摘录数据。 然后&＃xff0c;使用矩方法&＃xff0c;我们可以自定义时间戳的显示方式。
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
摘要
在本章中&＃xff0c;我们学习了如何设置react-native-render-html和moment包&＃xff0c;以呈现HTML标签&＃xff0c;并使用moment包格式化时间戳。
本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。 由于我的博客谈论的是本机反应&＃xff0c;因此该系列和文章相互联系。 我们将学习如何设置许多使我们的生活舒适的程序包&＃xff0c;并学习如何处理WordPress API。 在此&＃xff0c;本书中讨论的最突出的功能是深色主题&＃xff0c;脱机模式&＃xff0c;无限滚动等。 您可以在本系列中找到更多。 本教程系列的灵感来自instamobile的React Native App模板
From: https://hackernoon.com/build-wordpress-app-with-react-native-6-html-renderer-4ar632mm
京公网安备 11010802041100号