PM - 03 - Introdução ReactNative

Programação Mobile
Introdução – ReactNative
Professor: Carlos Alberto

Email: [email protected]
Instalação
Instalação
• Relembrando, para instalar o React Native precisamos:
▫ Instalar o NODE (https://nodejs.org/en/)
• Também vamos precisar do EXPO, que irá cuidar de configurar todo o ambiente para a
gente.
• Após, o Node estar instalado, execute no CMD:

npm install –g expo-cli
Criando Projeto
Criando novo projeto
• Para criar um novo projeto usando o expo, execute o comando no terminal (cmd/powershell):
expo init nomeProjeto
• Logo em seguida será perguntado qual template gostaria de usar. Em nossas aulas vamos aprender
com o TypeScript, para podermos adicionar as tipagens ao nosso código.
Estrutura do Projeto
Estrutura do Projeto
• O ReactNative na realidade não é um framework, mas sim uma biblioteca. Por tanto não possui uma
estrutura bem definida de onde fica cada elemento, o programador que escolhe como organizar.
• Ao criar um novo projeto, teremos os seguintes arquivos:
Pasta onde é disponibilizado o ícone e splashscreen ao abrir aplicativo

Pasta onde ficam os pacotes de terceiros baixandos pelo npm install
Arquivos usado pelo expo para configurar as builds

Arquivo inicial a ser carregado na aplicação
Arquivo de configuração do pacote node com todos os pacotes que
devem ser
Regras baixados oudo
de compilação executados pelo
TypeScript comando
para NPM
JavaScript
package.json
• No nosso arquivo package.json além das dependências queexecutado
O arquivo a ser devem seraobaixadas temos:
rodar npm install
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start", Comandos personalizados a serem
"android": "expo start --android", executados pelo npm:
"ios": "expo start --ios",
"web": "expo start --web",
npm start = expo start
"eject": "expo eject" npm run android = expo start --android
}, npm run ios = expo start --ios
... npm run web = expo start --web
} npm run eject = expo eject
OBS: “npm start” ou “expo start” roda o programa para testarmos
AppEntry.js
• O arquivo AppEntry.js define que o primeiro arquivo a ser executado pelo EXPO será o App.tsx na
raiz do projeto. import { registerRootComponent } from 'expo';
import { activateKeepAwake } from 'expo-keep-awake';
import App from '../../App';
if (__DEV__)
activateKeepAwake();
registerRootComponent(App);
• Caso deseje alterar qual é o arquivo inicial, pode alterar qual arquivo está sendo importado para o
registerRootComponent.
• OU copia esse mesmo código na raiz do seu projeto, customizando como desejar e pede para que
o “main” seja sse seu novo arquivo.
CLI
CLI
• Assim como ocorre com alguns frameworks como o Laravel, Angular, Ionic entre outros, também
temos um CLI do expo.
• Ao executar o comando expo no terminal, será listado todos os comandos que o expo dispõem.
• Alguns mais comuns:

▫ expo start – Roda o código para teste
▫ expo login – loga com sua conta do expo
▫ expo logout – desloga sua conta do expo
▫ expo client:install:android – Instala o aplicativo do expo para rodar o seu código de teste no android
que estiver plugado no usb
▫ expo publish – disponibiliza o aplicativo no teu repositório do expo, para que o cliente ou outras pessoas
possam testá-lo.
▫ expo url – exibe a url do seu repositório do expo.
CLI
• Para testar nosso primeiro código execute o comando:
npm start
• Será aberto no navegador um console com

o debug do seu projeto e um QRCode:
Cliente Expo
• Para testar sua aplicação em tempo real será preciso o aplicativo do expo no seu aparelho android
ou ios.
• O programa pode ser baixado nas lojas oficiais ou com o celular plugado no usb com a opção
depuração execute o comando:
expo client:install:android
• O que será instalado no seu celular não é o seu programa ainda, mas sim o programa da expo para
testarmos nosso código em tempo real!
Cliente Expo - Rodando
Caso não esteja logado ou não possua conta,
basta ler o QR Code disponibilizado no site
no pc.
Caso esteja logado tanto na sua conta do

expo tanto no celular quanto no pc, o
aplicativo rodando para teste já estará visível
para testar
Expo – QR Code
• O QR Code gerado será baseado na opção escolhida:
▫ Tunnel – Usa um domínio externo usando o ngrok e proxy, por tanto pode ser
testado em redes distintas. Porém o upload é mais lento.
▫ LAN – O QR Code vai funcionar para qualquer conectado na mesma
rede. Ideal para testar no celular no mesmo wifi.
▫ Local – Funciona localhost, ou seja, o QR Code só vai funcionar na
própria máquina. Ideal para emuladores no próprio PC.
Alterando o Aplicativo
Estrutura Básica do código
• O React Native funciona através de componentes que são disponibilizados através de uma função
ou uma classe.
• No App.tsx temos:
Sempre que renderizarmos um componente, temos que importar o
React, para informar que esse arquivo é um JSX/TSX
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
Estrutura Básica do código
export default function App() { Os componentes nativos do ReactNative são
return ( importados desse pacote
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({

container: { Estamos exportando uma função, que apenas tem
Os componentes visuais são baseados em tags
flex: 1, o papel de exibir o conteúdo que está sendo
backgroundColor: '#fff', próprias do React.
retornado.
alignItems: 'center',
justifyContent: 'center',
}, O css é retornado como um objeto e as suas
}); propriedades são quase as mesmas do css padrão,
só que usando o padrão camelCase
export interface AppProps { }
export default class AppComponent extends React.Component {

constructor(props: AppProps) {
super(props);
}
Formato de Classe A função render, retorna o que deve ser exibido na tela.
public render()
• A mesma { anterior, poderia ser escrita como uma classe da seguinte forma (pode usar o
função
return ( tsrnc do snippet do React) O uso de classe é ideal quando nosso componente mais
comando
<View style={styles.container}> complexos com atributos e outras funções
<Text>Open up App.tsx to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center'
},
});
Testando o Código
• Caso altere um texto, já poderá ver que seu aplicativo irá atualizar
automaticamente.
• Caso não atualize, basta chacoalhar o celular que irá aparecer as

seguintes funções:
Reload – Atualiza a aplicação
Live Reload – Habilita atualização da aplicação sempre que tem
alteração. Volta para a tela inicial.
Hot Reloading – Habilita atualização da aplicação de forma mais
rápida mantendo o cache do código anterior.
Perf Monitor – Monitor de Perfomance da aplicação
Components
• Os componentes visuais devem funcionar como tags, logo sempre que aberto deve ser fechada.
• Na próxima aula veremos mais detalhes de algumas tags como botões, inputs, imagens, textos...
<View style={styles.container}>
<Text>Olá Mundo</Text>
<Button title="Clique-me" onPress={() => console.log('Clicou')}></Button>
</View>
CSS
• Para aplicar um css em um componente, devemos acessar a propriedade style desse componente.
• Sempre que formos passa uma variável pra um atributo, usamos as chaves {}
<Text style={styles.texto}>
• Os atributos css’s aqui são os mesmo do HTML, porém usando padrão camelCase. Também
devemos criar a variável através da classe StyleSheet: const styles = StyleSheet.create({
container: {
• Pode usar o snippet “rnss” para criar o StyleSheet flex: 1,
backgroundColor: '#fff',
modelo do React Native.
justifyContent: 'center',
},
texto: { fontSize: 50 }
});

PM - 03 - Introdução ReactNative

Enviado por

Direitos autorais:

Formatos disponíveis

PM - 03 - Introdução ReactNative

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

PM - 03 - Introdução ReactNative

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Mobile

Professor: Carlos Alberto

• Após, o Node estar instalado, execute no CMD:

• Ao criar um novo projeto, teremos os seguintes arquivos:

Pasta onde é disponibilizado o ícone e splashscreen ao abrir aplicativo

Arquivos usado pelo expo para configurar as builds

import App from '../../App';

• Alguns mais comuns:

• Será aberto no navegador um console com

Caso esteja logado tanto na sua conta do

const styles = StyleSheet.create({

export default class AppComponent extends React.Component {

const styles = StyleSheet.create({

• Caso não atualize, basta chacoalhar o celular que irá aparecer as

Você também pode gostar