Instituto Federal de Santa Catarina

React Native
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
◉ Introdução
◉ Criando o Projeto
◉ Olá Mundo!
◉ Style

2
Introdução

3
“Learn once, write anywhere!”

https://reactnative.dev/

4
Instalando o React Native

Para utilizar o React Native é preciso:

◉ Instalar o NodeJS (https://nodejs.org/en/)
◉ Instalar o Git (https://git-scm.com/)
◉ npm install -g expo-cli
◉ Instalar um emulador de sua preferência (LDPlayer).

5
Executando um App React Native

Para criar/executar um app React Native é preciso:

◉ Navegar até a pasta onde deseja criar o projeto
◉ expo init <nome do projeto>
◉ Escolher a opção “blank”
◉ npm start

6
Interface de conexão sendo executada no navegador
(http://localhost:19002/).

7
App react native sendo executado no emulador.

8
Editando a Aplicação

Para modificar a aplicação,

vamos utilizar o Visual Studio
Code. Basta abrir a pasta do
projeto no editor.

O arquivo que nos interessa é

o App.js.

9
10
 Componente

Estilo

11
Olá Mundo!

12
Hello World em React Native usando função.

13
Hello World em React Native usando classe.

14
Style

15
Style

Não necessita de uma linguagem especial para

estilizar o conteúdo. Isso é feito através do JavaScript.

Todos os componentes aceitam uma prop chamada “style”.

Sintaxe parecida com css, porém utiliza camelCase.

backgroundColor ao invés de background-color

16
Style

Pode-se fazer tudo no

mesmo arquivo ou em
arquivos separados.

Se optar por fazer em

arquivos separados,
deve-se exportar o
estilo.

17
Style

18
Obrigado!
Dúvidas ?
Você pode me encontrar em:
● fernando.albiero@ifsc.edu.br
@fernandoalbiero

19