Programação Mobile Coding
Prof. Victor Sotero
Aula 02 – Componentes básicos do React Native
Criando seu primeiro aplicativo
• Uma vez já possuindo o VS Code e o [Link] instalado e estar
dentro do diretório onde vai ficar seu projeto, digite o
comando a seguir para inicializar seu app:
• npx create-expo-app –templates
• Após isso, através do terminal, acesse o diretóri MeuApp
através do comando cd MeuApp
• Utilize o comando npx expo start para iniciar o serviço.
Prof. Victor Sotero
• O arquivo principal do seu aplicativo é o [Link]. É através
dele que começaremos a criar nosso aplicativo.
Prof. Victor Sotero
Conhecendo alguns componentes através da
página do React Native
• Acesse o link [Link] e escolha a opção Get
Started;
• Após isso, clique em Developnment e escolha Components
Prof. Victor Sotero
Entendendo a estrutura
• Abra o [Link] através do VS Code;
• Exclua todo o código pois vamos precisar adicionar uma nova
codificação;
• Na primeira linha importe o React para seu projeto;
• Vamos precisar também importar o React-Native para usar
seus componentes. Dentro das chaves colocamos os nomes
dos componentes que serão utilizados;
Prof. Victor Sotero
Entendendo a estrutura
• Precisamos criar uma função para começar a utilizar os
componentes.
• No nosso exemplo estamos utilizando os componentes View
e Text. Para isso, utilizamos o jsx (tags) dentro do return da
função criada;
• A última coisa a ser feita é exportar a função criada.
Prof. Victor Sotero
• Arquivo 1
• Você pode pesquisar outros componentes através da
documentação do site do React-Native;
Prof. Victor Sotero
Criando o mesmo app em formato de
“componentização” – Usando Classe
• Apague todo o código e deixe apenas os imports;
• No primeiro import, logo após o React, adicione uma virgula
e {Component};
• Após isso devemos criar uma classe chamada App que vai ser
a extensão de Component;
• Usamos a função render para renderizar os componentes;
• Inserimos os componentes Text e View na função render;
• Exportamos a classe.
Prof. Victor Sotero
• Arquivo 2
• Você pode adicionar mais componentes (Text) no seu app.
Prof. Victor Sotero
Utilizando Props
• Forma reduzida de atribuir propriedades aos componentes;
• São utilizadas para passar dados entre componentes;
• O fluxo de dados em React é unidirecional (somente do
componente pai para o filho);
• Nesse nosso exemplo vamos utilizar a propriedade style para
mudara a formatação de alguns textos:
<Text style={{color : 'red', fontSize: 18, margin:15}}>
Olá, galera!
</Text>
Prof. Victor Sotero
• Arquivo 3
Prof. Victor Sotero
Inserindo Imagens
• Primeiro devemos adicionar o componente Image no import do
react native;
• Após isso, insira o código abaixo dentro do View:
<Image source =
{{uri:'[Link]
style={{width: 300, height: 300}}//é obrigatório colocar largura e
altura
/>
Prof. Victor Sotero
• Arquivo 4
Prof. Victor Sotero
Utilizando constantes para imprimir textos
• Podemos criar uma constante fora da View e chamar ela
internamente.
• Veja como fazer no exemplo do arquivo 5;
Prof. Victor Sotero
Criando seu próprio componente
• Podemos criar componentes com nomes específicos e depois
utilizar ele para ser renderizado dentro da View.
• Veja no exemplo do arquivo 6 como fazer.
Prof. Victor Sotero
Entendendo os states
• Correspondem aos estados do componente;
• Os estados do componentes são variáveis (mutáveis),
diferentemente dos props (imutáveis);
• Para isso precisamos utilizar um construtor que irá receber
props;
• Vamos adicionar um componente Button que ao ser
pressionado vai mudar uma state. Vejamos como o código
deve ficar no arquivo 7
Prof. Victor Sotero
• Continua...
Prof. Victor Sotero