Listando os posts (Parte 2)

Dando sequência à listagem dos itens, vamos agora finalizar a definição do FlatList.

Criando componente de renderização

Em nosso componente de listagem precisamos passar uma propriedade que seja um outro componente que represente a renderização de um item.

Acompanhando a aula, implemente o componente abaixo:

const Item = (props) => {
    return (
        <View>
            <Image style={styles.img} source={{ uri: props.item.foto }}> </Image>
            <Text style={styles.titulo}>{props.item.titulo}</Text>
        </View>
    )
}

Passando o componente para o FlatList

Agora utilizaremos o componente criado no FlatList para listar os dados. Além de passar esse componente no renderItem, iremos passar a keyExtractor para identificação única de cada objeto da lista.

Veja abaixo:

<View style={styles.item}>
            <Image style={styles.img} source={{ uri: props.item.foto }}> </Image>
            <Text style={styles.titulo}>{props.item.titulo}</Text>
</View>

Estilizando o componente

Com os itens listados, realizaremos agora uma estilização para melhoria da visualização dos posts. Acompanhe a aula e implemente o código.

Ao final, seu arquivo deve estar como abaixo:

import React, { useEffect, useState } from 'react'
import { View, StyleSheet, FlatList, Image, Text } from 'react-native'

const Item = (props) => {
    return (
        <View style={styles.item}>
            <Image style={styles.img} source={{ uri: props.item.foto }}> </Image>
            <Text style={styles.titulo}>{props.item.titulo}</Text>
        </View>
    )
}

export default function Home() {

    const [posts, setPosts] = useState([])
    const [isLoading, setLoading] = useState(true)

    const getPostsAPI = async () => {
        try {
            setLoading(true)
            const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts')
            const posts = await response.json()
            setPosts(posts.posts)
        } catch (error) {
            alert('Falha ao carregar postagens. Tente novamente mais tarde.')
            setPosts([])
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        getPostsAPI()
    }, [])

    return (
        <View style={styles.container}>
            <FlatList style={styles.lista} data={posts} renderItem={({ item }) => <Item item={item} />} keyExtractor={(item) => "#" + item.id}></FlatList>
        </View>
    )
}

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

    },
    lista: {
        flex: 1,
        marginTop: 44
    }
})