Programação Mobile Coding
Prof. Victor Sotero
Aula 04 – Componentes básicos do React Native
Trabalhando com Botões
• Vamos dar continuidade ao app criado na aula passada
(App11).
• Para isso vamos fazer um ajuste adicionando um botão.
Quando ele for clicado o nome abaixo do TextInput deve
aparecer.
• Lembre-se de importar o Button no topo do arquivo.
• A seguir veremos os passos para realizar a ação do botão.
Prof. Victor Sotero
Passo 1
Prof. Victor Sotero
Passo 2
Prof. Victor Sotero
Passo 3
Clique aqui para acessar o arquivo completo.
Prof. Victor Sotero
Criando um joguinho – Pé na Jaca
• A ideia agora é criar um jogo onde o participante, ao clicar
em um botão, receba uma frase;
• Uma imagem também deve ser modificada;
• Inicialmente crie uma pasta chamada src dentro do diretório
raiz;
• Insira as imagens dentro dessa pasta(no nosso caso serão
duas imagens);
• Vamos utilizar um novo componente para criar botão
(TouchableOpacity).
Prof. Victor Sotero
Passo 1 - Setando o texto e a imagem inicial
Prof. Victor Sotero
Passo 2 – Criando um Array de Frases
• Esse array deve ficar dentro do construtor de states.
Prof. Victor Sotero
Passo 3 – Configurando o Botão
Prof. Victor Sotero
Passo 4 – Buscando frases e mudando a
imagem
Obs.: lembre-se de fazer o bind dentro do construtor de states.
Prof. Victor Sotero
Passo 6 - Apresentando a frase no Text
Prof. Victor Sotero
Passo 7 – Inserindo uma imagem local
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos -
container
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos - img
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos -
textoFrase
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos -
botao
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos -
btnArea
Prof. Victor Sotero
Passo 8 – Estilizando os grupos de estilos -
btnTexto
Prof. Victor Sotero
• Clique aqui para acessar o arquivo completo.
Prof. Victor Sotero