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