Ajustes do componente BlogPost

Com a tela de detalhes já sendo exibida, é perceptível que ainda existem melhorias para serem feitas nela.

Preview Props

O componente está se comportando do mesmo modo na pré-visualização e no detalhamento. Porém, querem comportamentos distintos. Por exemplo: nos detalhes o componente não deve ser clicável e deve possuir a barra de rolagem.

Para resolver isso, vamos inserir uma nova prop chamada preview, que quando verdadeira se comporta como na tela de Home, mas caso seja falsa, se comporta como na tela de Posts.

Sendo assim, acompanhe o passo a passo da aula e altere seu componente. Ao final, ele deverá ficar como abaixo:

import React from 'react'
import { Text, StyleSheet, Image, TouchableOpacity, ScrollView, View } from 'react-native'
import RenderHTML from 'react-native-render-html'

export default function BlogPost({ preview, item, navigation, width }) {

    const previewText = preview ? item.texto.substring(0, 300) + '...' : item.texto
    const source = { html: `<div style='color: white'>${previewText}</div>` }

    const base = (
        <View><Image style={styles.img} source={{ uri: item.foto }}></Image>
            <Text style={styles.titulo}>{item.titulo}</Text>
            <RenderHTML contentWidth={width} source={source}></RenderHTML></View>)

    if (preview) {
        return (
            <TouchableOpacity onPress={() => navigation.navigate('BlogPost', { post: item })} style={styles.item}>
                {base}
            </TouchableOpacity>)
    } else {
        return (<ScrollView>
            {base}
        </ScrollView>)
    }

}

const styles = StyleSheet.create({
    item: {
        backgroundColor: 'black'
    },
    img: {
        width: '100%',
        height: 250
    },
    titulo: {
        fontSize: 16,
        fontWeight: '700',
        marginVertical: 10,
        color: 'white'
    }
})

Utilizando a prop

Agora que já é possível que o componente se comporte de formas diferentes, devemos, ao utilizar o componente, enviar uma prop que diferencie esse comportamento.

Então, ao utilizar o componente BlogPost, é necessário passar o valor de preview. Veja um exemplo abaixo:

<BlogPost preview={false} width={width} item={route.params.post} navigation={navigation}></BlogPost>

Projeto final

Sendo assim, chegamos ao final da construção do blog. Você pode encontrar os arquivos completos clicando aqui.