🥇 Crie um aplicativo WordPress com React Native # 8: criando uma tela de postagem única

Esta série pretende mostrar como eu construo um aplicativo para servir conteúdo do meu blog WordPress usando o react nativo. Desde então, meu blog está falando sobre reagir nativo, a série e os artigos estão interligados. Aprenderemos como configurar muitos pacotes que deixam nossas vidas confortáveis e como lidar com APIs do WordPress. Aqui, os recursos mais importantes mencionados no livro são o tema escuro, modo offline, rolagem infinita e muitos mais. Você pode descobrir muito mais nesta série. Essa inspiração para fazer esta série de tutoriais veio dos Modelos móveis nativos do React

Caso queira aprender desde o início, todas as partes anteriores desta série de tutoriais estão disponíveis abaixo:

Como temos a lista de artigos na tela inicial, também precisamos exibir os artigos completos. Para isso, vamos criar a tela SinglePost que mostrará o artigo geral. Aqui, aprenderemos como buscar um único artigo da API do WordPress.

Primeiro, precisamos adicionar a tela SinglePost ao nosso navegador no arquivo App.js. Para isso, precisamos importar a tela SinglePost e adicioná-la ao navegador da pilha conforme mostrado no trecho de código abaixo: Em seguida, precisamos adicionar a navegação da tela inicial à tela SinglePost. A ideia é navegar até a tela SinglePost ao clicar em qualquer cartão de artigo na lista de artigos da tela inicial. Como resultado, todas as informações do artigo são exibidas na tela SinglePost. Para isso, precisamos envolver o modelo usando o componente e adicionar a configuração de navegação ao seu evento, conforme mostrado no trecho de código abaixo:
javascript import SinglePost from './src/screens/SinglePost'; const StackNavigator = createStackNavigator({ DashboardTabNavigator: DashboardTabNavigator, SinglePost: SinglePost, }); export default createAppContainer(StackNavigator);

FlatListTouchableOpacity
onPress
javascript <TouchableOpacity onPress={() => this.props.navigation.navigate('SinglePost', { post_id: item.id, }) }> <Card style={{ shadowOffset: {width: 5, height: 5}, width: '90%', borderRadius: 12, alignSelf: 'center', marginBottom: 10, }}> .................................. // other code </Card> </TouchableOpacity>

Implementando tela SinglePost

Agora, vamos implementar a IU da tela SinglePost. Para isso,
precisamos criar um novo arquivo chamado SinglePost.js na pasta ‘./screens/’.

Na tela SinglePost, queremos exibir a imagem da capa do artigo e
todo o conteúdo do artigo junto com o avatar do autor, nome e
data de publicação do artigo.

A implementação geral da tela SinglePost é fornecida no
trecho de código abaixo: Aqui, importamos os pacotes necessários para construir a tela SinglePost. Também definimos os estados necessários que são e .
javascript import React from 'react'; import { Avatar, Button, Card, Title, Paragraph, List, } from 'react-native-paper'; import HTML from 'react-native-render-html'; import { View, ScrollView, ActivityIndicator, Dimensions } from 'react-native'; import moment from 'moment'; export default class SinglePost extends React.Component { constructor(props) { super(props); this.state = { isloading: true, post: [], }; }

isloading
post

Agora, precisamos buscar a respectiva postagem na API do WordPress usando o fetch
método. Primeiro, precisamos obter o id do post que enviamos da página da tela inicial
como um acessório. E então, use-o para buscar a postagem específica da API, conforme mostrado
no trecho de código abaixo: Aqui, buscamos a postagem única usando a API e também a analisamos no formato JSON . Em seguida, definimos a postagem buscada para a variável de estado e alteramos o estado para falso.
javascript componentDidMount() { this.fetchPost(); } async fetchPost() { let post_id = this.props.navigation.getParam('post_id') const response = await fetch( `https://kriss.io/wp-json/wp/v2/posts?_embed&include=${post_id}` ); const post = await response.json(); this.setState({ post: post, isloading: false, }); }

post
isloading

Agora, precisamos mostrar o modelo de postagem com base no isloadingestado. Se o
isloadingestado for verdadeiro, o ActivityIndicatormodelo será exibido,
exibindo o carregador giratório. Depois que os dados são buscados com sucesso, o
modelo de postagem é mostrado e o carregador desaparece. A implementação geral é
fornecida no snippet de código abaixo:
javascript render() { let post = this.state.post; if (this.state.isloading) { return ( <View style={{ paddingVertical: 20, borderTopWidth: 1, borderColor: '#CED0CE', }}> <ActivityIndicator animating size="large" /> </View> ); } return ( <ScrollView> <Card> <Card.Content> <Title>{post[0].title.rendered} </Title> <List.Item title={`${post[0]._embedded.author[0].name}`} description={`${post[0]._embedded.author[0].description}`} left={props => { return ( <Avatar.Image size={55} source={{ uri: `${post[0]._embedded.author[0].avatar_urls[96]}`, }} /> ); }} /> <List.Item title={`Published on ${moment( post[0].date, 'YYYYMMDD' ).fromNow()}`} /> <Paragraph /> </Card.Content> <Card.Cover source={{ uri: post[0].jetpack_featured_media_url }} /> <Card.Content> <HTML html={post[0].content.rendered} imagesInitialDimensions={{ width: Dimensions.get('window').width, height: Dimensions.get('window').width * 2, } }/> </Card.Content> </Card> )} </ScrollView> ); } }

Aqui, para o modelo de postagem, usamos diferentes componentes do pacote react-native, bem como o pacote react-native-paper. O componente pai é o ScrollViewcomponente que permite a rolagem da tela verticalmente. Em seguida, o ScrollViewcomponente envolve o modelo com o Cardcomponente e seus subcomponentes.

Portanto, obteremos o seguinte resultado na tela do emulador:

Como podemos ver, implementamos com sucesso a IU geral para a tela SinglePost.

Resumo

Neste capítulo, aprendemos como implementar a IU geral da tela SinglePost. Primeiro, aprendemos como configurar a navegação para a tela SinglePost clicando em qualquer postagem de artigo na lista da tela inicial. A tela SinglePost exibe o conteúdo geral de um único artigo. Usamos diferentes componentes de react-native-paper para implementar a UI. Também usamos o pacote moment-native-render-html nesta tela. Por fim, aprendemos como buscar os dados da postagem de um único artigo da API do WordPress usando a função de busca.

Implementando tela SinglePost

Resumo

Related Posts