omn11_mobile.md

Mobile da aplicação

• Instalando Expo
• Criando um projeto React Native
• Executando Projeto
  • No celular
  • Emuladores
  • Expo Snack
• Diferenças para o ReactJS
  • Elementos HTML
  • Semântica
  • Estilização
    • Flexbox
    • Propriedades
    • Herança de estilos
    • Estilização própria
• Estrutura de pastas
• Ícone e splash screen
• Configuração de navegação
• Página de casos
• Detalhe de casos
• Abrindo Whatsapp e E-mail
• Conexão com a API
• Enviando projeto ao GitHub

1) Instalando Expo

Para instalar o Expo, deve-se primeiramente instalar a versão de linha de comando de forma global, após executar todas as instalações tente rodar o comando de acordo com a forma abaixo:

$ npm install -g expo-cli
(...)
$ expo -h
(...)
To learn more about a specific command and its options use 'expo [command] --help'

Caso ache necessário a Rocketseat disponibilizou os erros mais comuns do expo-cli:

Rocketseat/expo-common-issues

No meu caso precisei definir a variável de ambiente no terminal FISH:

$ set PATH ~/.npm-global/bin $PATH

Neste caso, pode-se variar os problemas. Porém a lógica é a mesma, caso o terminal não encontre o comando, verifique qual é o seu PROMPT e de que forma será necessário setar a variável de ambiente. Verifique também se deverá colocar o diretório completo ou apenas parte dele como acima ~/.npm-global/bin .

2) Criando um projeto React Native

Para criar o projeto, a primeira coisa a se fazer é inicializar a pasta do projeto mobile com este comando:

$ expo init mobile
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration

Podemos seguir o projeto escolhendo o blank

3) Executando Projeto

Para executar o projeto primeiro entre na pasta do projeto e execute o comando abaixo:

$ cd mobile
$ yarn start

Ele irá abir uma página na porta [http://localhost:19002](http://localhost:19002) e lá você poderá acessar as configurações básicas do expo, assim como o debugger.

a) No celular

Para acessar no celular basta instalar o app expo na play-store ou apple-store, após abrir o aplicativo o mesmo irá solicitar o QR Code que está na página do expo no PC.

b) Emuladores

• Android Studio
• XCode

c) Expo Snack

Caso queira Emular de forma Online e remota aqui vai uma sugestão que talvez sirva:

Snack - React Native in the browser

4) Diferenças para o ReactJS

.
├── /.expo
├── /.expo-shared
├── App.js
├── app.json => Detalhes das plataformas
├── /assets
│    ├── icon.png
│    └── splash.png
├── babel.config.js
├── /node_modules
├── package.json
└── yarn.lock

a) Elementos HTML

• Não tem semântica e significado maior em seus componentes
• A estilização usa nomes e parâmtros próprios, com as classes pré-definidas

b) Semântica

c) Estilização

I) Estilização: Flexbox

• Todos os componentes tem o display: flex por padrão

II) Estilização: Propriedades

• As propriedades não contém hífen colocando no lugar letras maiúsculas

III) Estilização: Herança de estilos

• Não existe herança de estilos no ReactNative
• É necessário que se passe um objeto para passar as cores por exemplo

IV) Estilização: Estilização própria

• Deve existir uma estilização própria para cada elemento

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Fala Bruxões!</Text>
      <Text style={styles.title}>Tô com depressãooooo!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#333',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color:'#fff',
    fontSize: 41,
    fontWeight: 'bold',
  },
});

5) Estrutura de pastas

      .
      ├── /.expo
      ├── /.expo-shared
      ├── App.js
      ├── app.json => Detalhes das plataformas
      ├── /assets
      │		├── icon.png 
      │		└── splash.png
      ├── babel.config.js
      ├── /node_modules
+     ├── /src
+     │   ├── /pages
+     │   │     ├── /Incidents
+     │   │     │    ├── index.js
+     │   │     │    └── styles.js
+     │   │     └── /Details
+     │   │          ├── index.js
+     │   │          └── styles.js
+     │   └── routes.js   
      ├── package.json
      └── yarn.lock

6) Ícone e splash screen

O ícone e a splash screen estão localizados na pasta /assets, para mudar basta colocar imagens com a mesma resolução substituindo a atual.

7) Configuração de navegação

Routing & Navigation

React Navigation

$ npm install @react-navigation/native

$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

React Navigation

$ npm install @react-navigation/stack

8) Página de casos

routes.js


import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const AppStack = createStackNavigator();

import Incidents from './pages/Incidents';
import Detail from './pages/Detail';
export default function Routes() {
    return ();
}

Dentro da função Routes crie a seguinte sequência:

Navigation Container

<NavigationContainer></NavigationContainer>

AppStack

<NavigationContainer>
    <AppStack.Navigator></AppStack.Navigator>
</NavigationContainer>

AppStack.Screen

(...)
<NavigationContainer>
    <AppStack.Navigator>
        <AppStack.Screen name="Incidents" component={Incidents} />
        <AppStack.Screen name="Detail" component={Detail} />
    </AppStack.Navigator>
</NavigationContainer>
(...)

Para remover o padrão acima basta fazer a seguinte alteração na tag AppStack.Navigator:

(...)
<AppStack.Navigator screenOptions={{headerShown: false}}>
(...)

9) Detalhe de casos

10) Abrindo Whatsapp e E-mail

11) Conexão com a API

12) Enviando projeto ao GitHub