React Native: Navegação por categorias
No desenvolvimento de aplicações móveis, especialmente aquelas que servem como plataformas de e-commerce ou delivery, a capacidade de navegar eficientemente por categorias de produtos ou serviços é fundamental para uma experiência do usuário satisfatória. O React Native, oferece componentes flexíveis como FlatList e SectionList para criar interfaces de usuário ricas e interativas. Vamos explora a implementação de um sistema de navegação por categorias usando React Native, demonstrando como tal funcionalidade pode ser implementada para melhorar significativamente a usabilidade de um aplicativo.
Fundamentação Técnica
A estrutura de um aplicativo que suporta navegação eficiente por categorias envolve a renderização de duas listas principais: uma FlatList para exibir as categorias de forma horizontal na parte superior da tela e uma SectionList para exibir os itens correspondentes a essas categorias abaixo.
Este arranjo permite aos usuários selecionar uma categoria e ver instantaneamente os itens relacionados a essa categoria, melhorando a navegação geral do aplicativo.
Componentes Utilizados
- FlatList: Um componente de lista simples e eficiente para renderizar uma lista horizontal de categorias. Sua propriedade
horizontalé utilizada para orientar a lista horizontalmente. - SectionList: Um componente de lista mais complexo que suporta seções. Cada seção pode representar uma categoria, com os itens dessa categoria sendo renderizados sob ela.
- Pressable: Um componente wrapper para tornar quase qualquer componente tocável, utilizado aqui para selecionar categorias.
Você consegue ter acesso a todo o código nesse link: https://github.com/orodrigogo/section-list-scroll
Implementação
Primeiro passo é definir a estrutura de dados:
const PRODUCTS = [
{
title: "Ofertas",
data: Array.from({ length: 3 }, (_, index) => String(index)),
},
{
title: "Petiscos",
data: Array.from({ length: 10 }, (_, index) => String(index)),
},
{
title: "Pratos",
data: Array.from({ length: 10 }, (_, index) => String(index)),
},
{
title: "Sobremesas",
data: Array.from({ length: 7 }, (_, index) => String(index)),
},
{
title: "Bebidas",
data: Array.from({ length: 5 }, (_, index) => String(index)),
},
]
const CATEGORIES = PRODUCTS.map((item) => item.title)
export { PRODUCTS, CATEGORIES }
Agora, o próximo passo é a preparação dos dados e a configuração inicial dos componentes. Aqui está um esboço inicial:
Para os que não sabem como estados funcionam no React sugiro a leitura desse conteúdo:
Paulo Clemente
import { CATEGORIES, PRODUCTS } from "@/utils/data"
export funcion Home() {
const [category, setCategory] = useState(CATEGORIES[0])
return (
<View style={styles.container}>
{/* Componentes aqui */}
</View>
)
}
Renderizando Categorias com FlatList
<FlatList
showHorizontlScrollIndicator={false}
horizontal
data={CATEGORIES}
keyExtractor={(item) => item}
renderItem={({ item }) => item(
<Category
titile={item}
isSelected={item===category}
onPress={() => setCategory(item)}
/>
)}
style={styles.categories}
contentContainerStyle={{
gap: 12,
paddingHorizontal: 32,
}}
/>
Itens e Categorias com SectionList
<SectionList
sections={PRODUCTS}
keyExtractor={(item) => item}
stickySectionHeadersEnabled={false}
showVericalScrollIndicator={false}
contentContainerStyle={styles.sectionContainer}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
Resultado:
A navegação por categorias em aplicativos móveis é uma funcionalidade crucial para manter os usuários engajados e melhorar a acessibilidade dos produtos ou serviços oferecidos. Utilizando FlatList e SectionList do React Native, desenvolvedores podem implementar essa funcionalidade de forma eficiente, proporcionando uma experiência de usuário suave e intuitiva. Este estudo de caso demonstra que, com um pouco de criatividade e conhecimento das ferramentas disponíveis, é possível criar interfaces de usuário que não apenas atendem às necessidades dos usuários, mas também as superam.
