Instalando e

criando um projeto
React-Native.
Aula -1

-Fernando Lucas (massan)

Abra o CMD
Digite o comando
º node –v
Esse comando vai verificar se existe o node instalado na sua máquina, se não tiver instale.
º npm install -g expo-cli
Esse comando vai instalar o expo, uma espécie de framework para o react-native.
º expo init “nomedoapp” (npx create-expo-app nomedoseuapp)
Esse comando irá baixar e criar sua primeira aplicação em react-native.
Selecione o segundo valor
Agora abra o projeto criado no vscode.
Emulador
Nós vamos utilizar nosso próprio celular para verificar as alterações que vamos fazer no projeto em
tempo real.
1 – Abra o terminal do vs code no cmd
2 – execute o comando – npx expo start
3 – scaneie o qrcode.
Agora entre na sotre do seu celular e baixe o aplicativo.
Expo.
Agora entre na sotre do seu celular e baixe o aplicativo.
Expo.
 Veja a mensagem no seu
celular
Open up app.js start on your app.
Vamos altera-la utilizando o fast refresh que é
uma propriedade que atualiza nosso app
instantaneamente.
Caso você não consiga conectar o celular
Caso você não consiga conectar o celular, você também pode verificar as alterações direto no
navegador do computador.
Primeiro aperta no terminal do vscode as teclas CTRL+C para parar o servidor.
Caso você não consiga conectar o celular
Com o servidor parado agora você pode escrever comando novamente.
Vamos instalar a dependência necessária para executar o arquivo no navegador.
Execute o seguinte comando.
npx expo install react-native-web@~0.19.6 react-dom@18.2.0
Agora espera a instalação acontecer.
Caso você não consiga conectar o celular
Execute também o seguinte comando.
npx expo install @expo/webpack-config@^19.0.0
Agora espera a instalação acontecer.
 Caso você não consiga conectar o celular
Depois disso execute o servidor
novamente.
Npx expo start
Agora vai aparecer o QR code
novamente, só que dessa vez você vai
apertar a tecla W no terminal onde
você digitou os comandos e assim ele
vai abrir no seu navegador com seu
aplicativo.
Veja a mensagem no
seu celular
No arquivo app.tsx que é o arquivo que
controla nosso aplicativo, vamos procurar
o componente <Text> </Text> que
renderiza nosso texto na tela, depois
vamos alteá-lo e pressionar CTRL+S ,
para salvar nossas alterações.
(Agora verifique a tela do seu celular. ☺)
Usando e utilizando a biblioteca do react
Estamos utilizando o React-native para criar nosso app, essa framework consegue utilizar bibliotecas
de outra linguagem que é o React.
Ta agora vamos criar nosso arquivo do 0
1 – Apague todo arquivo app.tsx
Agora vamos seguir.
Vamos utilizar o comando
Ele vai nos permitir utilizar a biblioteca do React no nosso projeto.
Toda interface que for adicionada no nosso app tem que retornar algum componente.

note que a função que renderiza (faz aparecer o componente na nossa tela ) está literalmente
pedindo um componente para ser dada como correta.
Adicionando o componente
Primeiro vamos trazer do React nossos componentes.
Agora que já importamos os componentes vamos poder utiliza-los dentro da nossa função.

Agora complete com a seguinte frase “Hello World, ta na Hora de codar”.

Onde você acha que a frase deve ficar?
 Cadê meu texto ?
Bom kkkkkk você deve ter percebido que o seu
texto está no canto superior do seu celular.
(Em alguns modelos quase não será visível)
Agora vamos organizar as coisas.
Primeiro vamos criar algumas pastas para separar os arquivos principais da instalação com os
arquivos que vamos adicionar.
1- Criar um pasta “src”
2- Dentro dela vamos criar uma pasta “screens”
3- Agora dentro da pasta “screens” vamos criar dois arquivos.
Esses dois arquivos vão funcionar da seguinte forma.

Esse será utilizado para Esse será utilizado para

guardar os componentes da guarda os estilos da tela
tela atual que o app estiver. atual da nosso aplicação.
(Lembrando muito o css).
Pronto- agora vamos importar as funções
Vamos copiar todos os códigos iniciais que estavam no arquivo app.tsx e vamos colar eles dentro do
arquivo index.tsx.
Alterações necessárias
Voltamos agora para dentro do nosso arquivo
Vamos agora chamar o arquivo ou seja a função que acabamos de copiar pra lá.
Dessa forma iremos acessar a função que criamos dentro do arquivo
Agora ainda dentro do arquivo vamos alterar nossa função principal para renderizar a
função que está sendo importada pelo comando acima.
Agora Vamos estilizar nosso arquivo.
Para isso vamos acessar o arquivo .
1- Vamos importar a biblioteca StyleSheet do react-native.
2- Agora vamos criar o objeto que vai guardar nossos estilos.
Pequena explicação
O que estamos fazendo é criando um arquivo de estilo e importando ele para dentro da tela da
nossa aplicação.
Você já fez essa lógica quando estudamos HTML e CSS no semestre passado.
Você criou um arquivo chamou styles.css e depois referenciou ele dentro do index HTML.
Dentro do arquivo
1 – Primeiro vamos testar os “stylos” sem referenciar o arquivo.

2 – Dessa forma vamos perceber que o código ficou enorme e bagunçado, vamos passar o objeto.

3 – pequenos ajustes.
Agora vamos falar sobre estado
No React o estado pode ser utilizado para armazenar valores! E nossa interface pode reagir a essa
mudança.
No nosso arquivo vamos importar outro componente do React “” TextInput’’.

Agora dentro da nossa <view> vamos passar nosso novo componente <TextInput/>..
Agora vamos criar uma estilização para nosso novo
componente.
Acesse o arquivo e nele vamos editar os stylos da nossas caixa de texto.
Referenciado os novos stylos
Agora voltamos até o arquivo e vamos chamar os estilos da nossa nova caixa de
texto igual fizemos com os estilo da nossa <view>.

Agora temos uma caixa de texto, um componente presente em diversas aplicações do nosso dia a
dia.
Agora vamos trabalhar a alteração dos estados.
Analogia
E o que consiste essas alterações de estado ?
Vamos pensar da seguinte forma, vamos imaginar que temos um programa que controla a lâmpada
de uma sala, essa lâmpada possui dois estados Ligada e desligada.
estado1: ligada = Sala iluminada
estado2: desligada = Sala escura
Quando alteramos o estado da nossa lâmpada, a nossa sala reagi e muda a sua forma.
Agora vamos trabalhar a alteração dos estados.
Traduzindo...
Com alterações de estado o nosso aplicativo consegue reagir em tempo real a interação do usuário
com a plataforma.
Exemplo:
Quando o usuário tenta criar uma senha e ela possui especificações no nível de segurança como:
Letras maiúsculas., minúsculas, 12 caracteres mínimos e etc.
A medida que o usuário digita, a plataforma já informa pra ele se essa senha será aceita.
a alteração dos estados.
Agora no nosso arquivo vamos criar um objeto que vai ler o que o usuário digitar e
mostrar em tela uma alteração de estado de acordo com o que foi digitado.
Vamos criar um componente <Text> pra identificar
onde irá aparecer o conteúdo que será alterado.
a alteração dos estados.
Agora vamos Importar componente que irá nos ajudar a verificar essas alterações.
Agora dentro da na função singin() vamos criar um objeto para ser utilizado como controlador das
alterações desses estados utilizando o componente que acabamos de importar o .
. = Declaração do objeto.
= Nome do estado.
= Nome da função que atualiza o estado.
a alteração dos estados.
Agora chamamos nosso objeto dentro do nosso
.
novo <text/>.

E no nosso estado alteramos o seu valor

inicial para.
a alteração dos estados.
Agora chamamos nosso objeto dentro do nosso
.
novo <text/>.

E no nosso estado alteramos o seu valor

inicial para.
a alteração dos estados.
Agora na nossa caixa de texto <textInput/> Vamos utilizar a função ela vai verificar
.
quando houver alguma alteração na caixa de texto.
Você também pode usar ela junto com o console.log() para verificar as alterações sem tempo real no
console.
Dentro do código da caixa de texto ela deve ficar assim.
Splash Screen
Para falar de componentes vamos fazer a tela de Sigin. . (próximo slide)
- Entre no github e baixe a pasta assets. . (próximo slide)
- Substitua todos os itens da pasta assets da sua aplicação. . (próximo slide)
- Depois entre na pasta SRC nos arquivos que você baixou e copie tudo que estiver na pasta assets,
para pasrta SRc assets da sua aplicação. (próximo slide)
- Se você Reiniciar ó emulador conseguirá verificar as alterações nas artes.
Splash Screen
Splash Screen
Splash Screen
Agora o fundo da ENTRADA da aplicação estará branco precisamos mudar essa configuração.
acesse o arquivo e procure a linha
essa linha vai controlar a cor de fundo padrão da nossa aplicação.
Posteriormente você pode escolher qualquer cor, mas dessa vez vamos escolher a cor

para combinar com os assets da nossa aplicação.

Componentes
Primeiro vamos limpar nossa função Function
Sigin(); e depois vamos importar nos
componentes que vamos utilizar.
Deixei nossa function assim:
Agora vamos utilizar o componente de imagem.
<IMAGE/>
Componentes
Agora precisamos importar a imagem vamos utilizar que está na pasta assets.

O Nosso aplicativo não consegue definir a tipagem de um arquivo PNG, então vamos resolver isso
agora.
Tipagem dinâmica é uma característica de determinadas linguagens de programação, que não exigem
declarações de tipos de dados, pois são capazes de escolher que tipo utilizar dinamicamente para
cada variável, podendo alterá-lo durante a compilação ou a execução do programa.
Componentes
Vamos criar os seguintes arquivos e pastas.
Dentro do arquivo

Vamos definir o tipo de

arquivo .Png. .
Componentes
Agora vamos linkar nossa imagem dento da
function();

Assim já podemos verificar ela no nosso app.

componentes
Bom agora vamos continuar criando a nossa tela inicial de Sigin();
Atualmente estamos assim: Queremos ficar assim:
Importante
Caso a imagem não apareça devemos criar logo seu arquivo stylos.

E pra imagem não ficar achatada vamos criar a propriedade.

 Componentes
Vamos adicionar alguns componentes e declarar alguns styles para eles, posteriormente criamos esses estilos .

A tag abaixo serve para

quebrar linha no texto.
 Componentes
Vamos adicionar alguns componentes e declarar alguns styles para eles, posteriormente criamos esses estilos .

A tag abaixo serve para

quebrar linha no texto.
Stylos
Vamos criar uma pasta para guardar nossas com figurações globais.
Ela vai funcionar como uma espécie de arquivo que guarda algo que é universal no nosso aplicativo,
exemplo: Cores de fundo, Cores de texto, Transições Etc.
Dentro da pasta Src crie uma pasta global, depois dentro da pasta global
crie a pasta ‘styles’ e dentro da mesma crie ao arquivo “theme.ts”.
Stylos
Dentro do arquivo theme, vamos criar um objeto para exportar nossas cores.
 Componentes
Você deve ter percebido que ficamos com vários erros no nosso código, isso é por conta que declaramos um
stylo sem criar o mesmo ainda.

Então agora abra o arquivo styles.ts para começarmos a criar os estilo.

Stylos do component
No arquivo vamos primeiro importar o nosso .

Agora vamos adicionar a nossa cor padrão do aplicativo que troucemos do arquivo theme.ts.
component
Agora que estamos criando a primeira tela vamos apagar o <TextInput> no arquivo

.
Vamos definir agora os stylos da imagem.
component
Agora vamos continuar construindo os estilos da aplicação.
Agora vamos trabalhar a statusbar que está fora do tema da nossa aplicação.

Primeiro vamos apagar a linha

Pois não vamos utilizar ela agora.

.

Configuração concluída! Plim Plim !

Agora vamos criar nosso botão de loguin com disc.
Dentro da pasta SRC crie as seguintes pastas e os seguintes arquivos.
Botão de loguin com discord.
Bom esses dois arquivos que criamos nós já sabemos como eles funcionam.
Vamos codar agora com mais rapidez e explicar apenas conteúdos novos.
Botão de loguin com discord.
Agora no arquivo index do nosso button.
Botão de loguin com discord.
Agora vamos criar os estilos necessários
Botão de loguin com discord.
Agora nós vamos até o arquivo que o index.tsx que está sendo renderizando pelo arquivo app.tsx e
importaremos o componente Buton que acabamos de criar.
Lembre-se que nós criamos dois index.tsx tenha cautela para não confundir.
Botão de loguin com discord.
Agora nós vamos até o arquivo que o style do nosso button.
Botão de loguin com discord.
Curiosidades sobre reutilização de componentes, nós podemos reutilizar qualquer componente,
também podemos utilizar caracterizas especiais em cada componente utilizando propriedades.
Botão de loguin com discord.
activeOpacity={0.7}, controla a opacidade do botão quando clicado.
Botão de loguin com discord.
Vamos utilizar da mesma forma como props.
Botão de loguin com discord.
Vamos utilizar da mesma forma como props.