Instituto Federal de Santa Catarina

Componentes da
Interface
Curso Técnico em Informática para Internet - 4ª Fase
Desenvolvimento para Dispositivos Móveis
Prof. Me. Fernando Albiero
fernando.albiero@ifsc.edu.br
Sumário
◉ Caixa de Texto
◉ Botão
◉ Listas
◉ ScrollView

2
Caixa de
Texto

3
Caixa de Texto

Para representar uma caixa de texto utiliza-se o

componente TextInput.

Algumas props importantes:

● onChangeText: callback executada sempre que o
conteúdo da caixa de texto sofre alteração.
● placeholder: mostra uma mensagem ao usuário
indicando o que deve ser digitado na caixa de texto.

4
5
6
Botão

7
Botão

Para representar um botão na tela utiliza-se o

componente Button.

Não permite muita customização, (não aceita a props style)

Algumas props importantes:

● title: texto exibido dentro do botão.
● onPress: callback executada ao clicar no botão.
8
9
10
Criando um Botão

Para criar um botão personalizado utiliza-se o

componente TouchableOpacity.

Como o componente Button não aceita customização, esse

componente é uma alternativa para criação de botões
personalizados.

Pode-se utilizar imagens e texto dentro do componente para

personalizar o botão.
11
12
13
Listas

14
Listas

Para criar uma lista de itens utiliza-se o componente

FlatList.

Esse componente já possui uma barra de rolagem

implementada em caso de listas muito grandes.

Só renderiza os elementos que estão dentro das dimensões

da tela.

15
Listas

Requer duas props para funcionar:

● data: é a informação que será exibida na lista. A

informação deve ser fornecida no formato chave-valor.
● renderItem: renderiza cada item de data.

16
17
Listas

Para criar uma lista com seções utiliza-se o

componente SectionList.

Algumas props importantes:

● sections: informação que será exibida na lista.
● renderSectionHeader: renderiza o título de cada seção.
● renderItem: renderiza cada item da lista.
● keyExtractor: gera uma key única para cada item da lista.

18
19
Listas

Por padrão a lista irá procurar por uma prop

chamada key em cada item da lista, isso irá gera um
warning.
Key é um atributo string especial que você precisa definir ao
criar listas. Ajudam a identificar qual item sofreu alteração, foi
adicionado ou removido.

Você pode utilizar uma prop chamada keyExtractor para

gerar uma key para cada item, conforme exemplo anterior.
20
ScrollView

21
ScrollView

Container genérico com barra de rolagem

implementada.

Pode conter diferentes componentes e Views.

Pode-se definir o scroll tanto na horizontal como na vertical.

Recomendado para quando se tem um número fixo de itens,

caso contrário, utilizar o FlatList (já possui barra de rolagem).
22
23
24
Obrigado!
Dúvidas ?
Você pode me encontrar em:
● fernando.albiero@ifsc.edu.br
@fernandoalbiero

25