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.
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:
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.
