Au 08 - Mobile - React Native - Criando componentes e estrutura do formulário - Mestres BEGIN
Introdução e Objetivos
Nesta fase inicial, focamos na estruturação básica do formulário de cadastro de produtos, priorizando:
- Definição dos componentes fundamentais
- Organização modular do código
- Preparação para implementação futura de estado e estilização
Arquitetura de Componentes
1AddProductForm (Container Principal)
2 InputPicker (Seleção de categorias)
3 InputText (Campos de texto)
4 ActionButtons (Controles)Implementação do InputPicker
Componente para seleção de categorias usando @react-native-picker/picker:
1interface InputPickerProps {
2 label: string;
3 items: Array<{ value: string; label: string }>;
4}
5const InputPicker = ({ label, items }: InputPickerProps) => (
6 <View>
7 <Text>{label}</Text>
8 <Picker mode="dialog">
9 {items.map((item) => (
10 <Picker.Item key={item.value} label={item.label} value={item.value} />
11 ))}
12 </Picker>
13 </View>
14);Implementação do InputText
Componente base para campos de texto:
1interface InputTextProps {
2 label: string;
3 placeholder?: string;
4}
5const InputText = ({ label, placeholder }: InputTextProps) => (
6 <View>
7 <Text>{label}</Text>
8 <TextInput placeholder={placeholder || ""} />
9 </View>
10);Estrutura do Formulário Principal
1const AddProductForm = () => {
2 const categories = [
3 { value: "eletronicos", label: "Eletrônicos" },
4 { value: "moveis", label: "Móveis" }
5 ];
6 return (
7 <View>
8 <Text>Cadastrar produto</Text>
9 <InputPicker label="Categoria" items={categories} />
10 <InputText label="Marca" placeholder="Ex: Samsung" />
11 <InputText label="Nome do produto" />
12 <Text>X</Text>
13 {/* Botão de fechar temporário */}
14 </View>
15 );
16};Organização do Projeto
1src/
2 components/ # Componentes reutilizáveis
3 InputPicker/
4 InputText/
5 screens/
6 products/
7 components/ # Componentes específicos
8 AddProductForm/
9 ProductsScreen.tsxPróximas Etapas
Funcionalidade
- Gerenciamento de estado dos campos
- Validação de formulário
- Conexão com API
Estilo
- Design responsivo
- Animações
- Componente modal
Experiência
- Feedback visual
- Tratamento de erros
- Otimizações de usabilidade
Conceitos Fundamentais
Modularização
Separação clara entre componentes genéricos e específicos
Tipagem
Interfaces TypeScript para props dos componentes
Preparação para Estado
Estrutura pronta para implementação de useState/useReducer
Considerações finais
Esta base sólida permite:
- Manutenção simplificada
- Reutilização de componentes
- Evolução incremental do projeto
