Pesquisar artigos na Base de Dados de Conhecimento

React Native

Caminho 1
Instalar EXPO

Instalar nodejs https://nodejs.org/pt-br/download/
verificar versão do node
npm --version

npm install -g expo-cli

Verificar se existe a versão do Expo
expo --version

Criando o primeiro projeto e rodando

expo login
expo logout

iniciar projeto

expo init PrimeitoExpoTeste --npm

Usando o Snack

https://expo.dev/snacks
Rodar aplicativos facilmente

Módulo 2: Instalando em ambiente Windows

Instalar nodejs https://nodejs.org/pt-br/download/
verificar versão do node
npm --version

python2

e JDK8

Instalando o React Native CLI

npm install -g react-native-cli

Instalando o Android Studio

https://developer.android.com/

Configurando Variáveis de Ambiente

ANDROID_HOME
C:\Users\Giovane Bertol\AppData\Local\Android\Sdk

Adicionar o ANDROID_HOME e Também adicionar o caminho do SDK no PATH
ANDROID_TOOL
"C:\Users\Giovane Bertol\AppData\Local\Android\Sdk\build-tools\30.0.2"

Criando um projeto

react-native init primeiroProjeto

Caso queira criar com outra versão react-native init primeiroProjeto --version=0.58 ex

Entendendo o React e React Native

Criando Classes ou Funções

Estilização com StyleSheet

const styles = StyleSheet.create({
});

SafeAreaView utilizar para ios.

Criando classes

style={styles.sectionContainer}

Estilização com StyledComponents

npm install styled-components

Utilização de Props:

Props e States

São propriedades que definimos aos componentes.

UseState

Utilizado para o componente ser renderizado.

Pode ser também ser criada uma arrow function

onChangeText={t=>setName(t)}

Mudando State com Botões

Condicional de Exibição

Ou ainda pode ser feito:

UseEffect

A ideia é de ser como uma trigger.

useEffect(()=>{

calc();

}, [pct, bill]);

Lidando com Teclado e Platform

Como altero para que no IOS atribua algumas configurações diferentes.

APIs do próprio React Native

import {Dimensions} from 'react-native';

let {widjt:largura, height:altura} = Dimensions.get('window');
import {alert} from 'react-native';

Separando em Componentes

Utilizando imports de objetos feitos pro você para reutilizar código.

Imagens

import {Image} from 'react-native';

Swipe para Deletar (1/2)

npm install react-native-swipe-list-view

AsyncStorage

Possibilidade de armazenar dados no Celular.

npm install @react-native-community/async-storage --save

Modal

StatusBar

import {StatusBar} from 'react-native';

Tipos de requisições a API

Testando uma API

Utilizando ferramantes como por exemplo Postman, insommia,

Requisição Then / Async-await

Projeto: Filmes em cartaz (1/2)

Requisições POST

Sistemas de Login

RNav5: Introdução e Instalação

npm install @react-navigation/native
3 tipos diferentes de telas

StackNavigator - Pode ir navegando entre as telas
Tab- Tem Tab já diz do que se trata.
DrawerNavigator - Como se fosse um menu

npm install react-native-screens react-native-safe-area-context

RNav5: Organização das Telas e Navegação de Telas

Pode ser usado via Props ou Hooks para realizar a navegação.
import {userNavigation} from '@react-navigation/native';

const navigation = userNavigation();

navigation.goBack() -- Retorna para a tela anterior do históricio.

RNav5: Passando Parâmetros entre telas.

Envio por userNavigation;
navigation.navigate('NomeTela',{name:name});

Como receber?

Via Hook
import {userNavigation,userRoute.} from '@react-navigation/native';

const route = userRoute();

const name = route.params.name;

caso não for enviado o valor então deverá ser tratado.
const name = route.params?.name; ou

const name = route.params?.name ?? 'Visitante';

RNav5: Personalizando o Header 1

Podemos manipular o HEADER.

Pode ser feito o StackNavigator

Para alterações de layout é melhor utilizar o userLayoutEffect.

RNav5: Inserindo Elementos no Header 1

RNav5: TabNavigator

npm install @react-navigation/bottom-tabs

Personalizando as tabs;

Contexto:

Stack Navigator

Responsável pela navegação de várias telas ao mesmo tempo.

O Stack Navigation, apesar de simples, já implementa um header e um botão de voltar nas rotas.

É ideal pra quando você quer uma implementação mais simples, ou não tem muito tempo para investir no layout.

É muito comum esse tipo de navigator ser utilizado em conjunto com algum outro navigator.

A implementação desse navigator é bem parecida com a do SwitchNavigator.

import { createStackNavigator, createAppContainer } from 'react-navigation';

import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';

const mainNavigation = createStackNavigator({
  Login,
  Dashboard,
});

export default createAppContainer(mainNavigation);

DrawerNavigator

Esse tipo navegação é bem conhecido e querido por muitos devs.

Esse navigator adiciona uma sidebar na lateral do aplicativo, o que é excelente pra quando você tem um grande número de rotas visíveis ao usuário.

A implementação desse navigator é bem semelhante aos anteriores.

Para esse exemplo, utilizamos a biblioteca react-native-vector-icons.

import React from 'react';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';

Icon.loadFont();

import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';

const mainNavigation = createDrawerNavigator({
  Login: {
    screen: Login,
    navigationOptions: () => ({
      drawerIcon: <Icon name="lock" size={20} color="#7159c1" />,
    }),
  },
  Dashboard: {
    screen: Dashboard,
    navigationOptions: () => ({
      drawerIcon: <Icon name="rocket" size={20} color="#7159c1" />,
    }),
  },
});

export default createAppContainer(mainNavigation);

https://blog.rocketseat.com.br/navegacao-react-native/

NavigationContainer

Desenvolvimento de APP Barber.