由于我们在主屏幕中具有文章列表&＃xff0c;因此我们也需要显示完整的文章。 为此&＃xff0c;我们将创建SinglePost屏幕&＃xff0c;该屏幕将显示整个文章。 在这里&＃xff0c;我们将学习如何从WordPress API获取单个文章。
首先&＃xff0c;我们需要将SinglePost屏幕添加到App.js文件中的导航器中。 为此&＃xff0c;我们需要导入SinglePost屏幕并将其添加到堆栈导航器中&＃xff0c;如下面的代码片段所示&＃xff1a;
import SinglePost from &＃39;./src/screens/SinglePost&＃39; ;const StackNavigator &＃61; createStackNavigator({DashboardTabNavigator : DashboardTabNavigator,SinglePost : SinglePost,
});export default createAppContainer(StackNavigator);
然后&＃xff0c;我们需要将导航从主屏幕添加到SinglePost屏幕。 当我们单击主屏幕文章列表中的任何文章卡片时&＃xff0c;其想法是导航到SinglePost屏幕。 如此一来&＃xff0c;文章中的完整信息将显示在SinglePost屏幕中。 为此&＃xff0c;我们需要以包裹FlatList通过使用模板TouchableOpacity分量和导航配置添加到它的onPress事件如显示在下面的代码片断&＃xff1a;
this .props.navigation.navigate( &＃39;SinglePost&＃39; , {post_id : item.id,})}>style &＃61; {{shadowOffset: { width: 5 , height: 5 },width: &＃39; 90 %&＃39;,borderRadius: 12 ,alignSelf: &＃39; center &＃39;,marginBottom: 10 ,}}>.................................. // other code
实施SinglePost屏幕
现在&＃xff0c;我们将实现SinglePost屏幕的UI。 为此&＃xff0c;我们需要创建一个名为SinglePost.js在新文件&＃39;./screens/&＃39;文件夹中。
在SinglePost屏幕中&＃xff0c;我们要显示文章的封面图像和文章的全部内容&＃xff0c;以及作者的头像&＃xff0c;文章的名称和发布日期。
下面的代码段提供了SinglePost屏幕的整体实现&＃xff1a;
import React from &＃39;react&＃39; ;
import {Avatar,Button,Card,Title,Paragraph,List,
} from &＃39;react-native-paper&＃39; ;
import HTML from &＃39;react-native-render-html&＃39; ;
import {View,ScrollView,ActivityIndicator,Dimensions
} from &＃39;react-native&＃39; ;
import moment from &＃39;moment&＃39; ;export default class SinglePost extends React . Component {constructor (props) {super (props);this .state &＃61; {isloading : true ,post : [],};}
在这里&＃xff0c;我们导入了构建SinglePost屏幕所需的必要软件包。 我们还定义了正在加载和发布的所需状态。
现在&＃xff0c;我们需要使用fetch方法从WordPress API中获取相应的帖子。 首先&＃xff0c;我们需要获取从主屏幕页面发送的帖子ID作为道具。 然后&＃xff0c;使用它从API提取特定的帖子&＃xff0c;如下面的代码片段所示&＃xff1a;
componentDidMount() {this .fetchPost();
}
async fetchPost() {let post_id &＃61; this .props.navigation.getParam( &＃39;post_id&＃39; )const response &＃61; await fetch(&＃96;https://kriss.io/wp-json/wp/v2/posts?_embed&include&＃61; ${post_id} &＃96;);const post &＃61; await response.json();this .setState({post : post,isloading : false ,});
在这里&＃xff0c;我们已使用API提取了单个帖子&＃xff0c;并以JSON格式对其进行了解析。 然后&＃xff0c;我们将获取的post设置为post state变量&＃xff0c;并将isloading状态更改为false。
现在&＃xff0c;我们需要根据isloading状态显示帖子模板。 如果isloading状态为true&＃xff0c;则显示ActivityIndicator模板&＃xff0c;该模板显示微调器加载器。 成功获取数据后&＃xff0c;将显示发布模板&＃xff0c;并且加载程序消失。 下面的代码段提供了总体实现&＃xff1a;
render() {let post &＃61; this .state.post;if ( this .state.isloading) {return (style &＃61; {{paddingVertical: 20 ,borderTopWidth: 1 ,borderColor: &＃39;# CED0CE &＃39;,}}> );}return ( {return ();}}/>)});}
}
在这里&＃xff0c;对于post模板&＃xff0c;我们使用了react-native包和react-native-paper包中的不同组件。 父组件是ScrollView组件&＃xff0c;它可以垂直滚动屏幕。 然后&＃xff0c; ScrollView组件使用Card组件及其子组件包装模板。
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
如我们所见&＃xff0c;我们还成功地为SinglePost屏幕实现了整个UI。
摘要
在本章中&＃xff0c;我们学习了如何实现SinglePost屏幕的整体UI。 首先&＃xff0c;我们学习了如何通过单击主屏幕列表中的任何文章来设置到SinglePost屏幕的导航。 SinglePost屏幕显示单个文章的整体内容。 我们使用了react-native-paper中的不同组件来实现UI。 我们还在此屏幕上利用了时刻和react-native-render-html包。 最后&＃xff0c;我们学习了如何使用fetch函数从WordPress API中获取单篇文章的数据。
本系列旨在展示我如何使用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-8-singlepost-px1j5328a
京公网安备 11010802041100号