O que \u00e9 React Native?<\/strong><\/h2>\r\n\r\n\r\n\r\nReact Native \u00e9 um projeto open source mantido pelo Facebook que, percebendo um volume de aplica\u00e7\u00f5es sendo criadas, resolveu lan\u00e7ar sua pr\u00f3pria solu\u00e7\u00e3o em 2015.<\/p>\r\n\r\n\r\n\r\n
Mesmo com pouco tempo de lan\u00e7amento, possui grandes cases de sucesso que s\u00e3o desenvolvidas com seu ambiente de programa\u00e7\u00e3o.\u00a0<\/p>\r\n\r\n\r\n\r\n
Seu conceito principal \u00e9 a utiliza\u00e7\u00e3o de componentes para construir interfaces, baseado em React para renderizar nativamente, aplica\u00e7\u00f5es para Android e para iOS.<\/p>\r\n\r\n\r\n\r\n
“Learn Once, Write Anywher<\/em>e” ou, em portugu\u00eas, aprenda uma vez e escreva em qualquer lugar. Obedecendo esse dilema, React Native cumpre muito bem a promessa de desenvolver para Android e iOS com a mesma base de c\u00f3digo.<\/p>\r\n\r\n\r\n\r\nTe indico esse artigo, caso fique em d\u00favida para escolher Ionic ou React Native<\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\nPor que usar React Native?<\/strong><\/h2>\r\n\r\n\r\n\r\nTrata-se de uma nova tecnologia mas j\u00e1 demonstra grande popularidade, sua aceita\u00e7\u00e3o no universo de desenvolvimento foi r\u00e1pida.<\/p>\r\n\r\n\r\n\r\n
Ter sido lan\u00e7ada pelo Facebook \u00e9 um dos motivos, mas permitir desenvolver utilizando apenas JavaScript na cria\u00e7\u00e3o, manipula\u00e7\u00e3o, desenvolver elementos em tela, inputs de texto, bot\u00f5es e quaisquer itens\u00a0do projeto, encapsular todo c\u00f3digo nativo \u00e9 a principal vantagem na escolha de tecnologia de projeto.\u00a0<\/p>\r\n\r\n\r\n\r\n
React Native vs Flutter<\/a><\/strong><\/h2>\r\n\r\n\r\n\r\n![\"React](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/06\/flutter-reactnative.png\")
\r\nQue comece a batalha!<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nQuanto \u00e0s tecnologias h\u00edbridas, o React Native cria componentes nativos em tela, n\u00e3o cria web views em HTML<\/a><\/strong>, IS, CSS, n\u00e3o sendo uma biblioteca h\u00edbrida, e assim, renderizando componentes nativos.\u00a0<\/p>\r\n\r\n\r\n\r\nGigantes que utilizam React Native\u00a0<\/strong><\/h2>\r\n\r\n\r\n\r\nBuscando desenvolver uma aplica\u00e7\u00e3o que d\u00ea a seus usu\u00e1rios uma experi\u00eancia nativa com alta performance, o React Native \u00e9 lan\u00e7ado com essa proposta.\u00a0<\/p>\r\n\r\n\r\n\r\n
Esses resultados s\u00e3o comprovados quando vemos nomes como, Facebook Ads, Uber Eats, AirBnB, Discord, Instagram, Walmart desenvolverem aplica\u00e7\u00f5es escal\u00e1veis e com altos n\u00edveis de exig\u00eancia.\u00a0<\/p>\r\n\r\n\r\n\r\n
\r\n![\"empresas](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/06\/reactnative-1024x398.png\")
\r\n
Empresas que usam React Native<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nReunindo todas as vantagens de uma aplica\u00e7\u00e3o nativa de fluxo de desenvolvimento similar a web e com f\u00e1cil portabilidade entre plataformas e dispositivos, se provou uma das melhores solu\u00e7\u00f5es para o desenvolvimento mobile.<\/p>\r\n\r\n\r\n\r\n
Programar em React Native<\/h2>\r\n\r\n\r\n\r\n
Tornar-se um desenvolvedor \u00e9 uma tarefa que exige plano e dedica\u00e7\u00e3o. Temos a facilidade da consulta da informa\u00e7\u00e3o que, ao mesmo tempo, se n\u00e3o houver organiza\u00e7\u00e3o, dificulta e tardia os resultados.<\/p>\r\n\r\n\r\n\r\n
Por isso, \u00e9 importante:<\/p>\r\n\r\n\r\n\r\n
\r\n- Ordenar os conte\u00fados;<\/li>\r\n
- Delimitar prazos;<\/li>\r\n
- Montar ciclos que trabalham fundamentos e pr\u00e1tica de exerc\u00edcios;<\/li>\r\n
- Relacionar teoria com a pr\u00e1tica;<\/li>\r\n
- Montar pr\u00e1ticas com cen\u00e1rios reais.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
Estes s\u00e3o os m\u00e9todos que eu consegui montar o meu processo de estudos, colhi resultados com maior agilidade e motiva\u00e7\u00e3o para estudar e desenvolver projetos mais desafiadores.<\/p>\r\n\r\n\r\n\r\n
Quais os desafios que eu vou enfrentar para fazer um app em React Native?<\/strong><\/h2>\r\n\r\n\r\n\r\nDesenvolver um aplicativo, em qualquer linguagem, requer alguns cuidados, como analisar onde quero chegar com essa solu\u00e7\u00e3o em rela\u00e7\u00e3o \u00e0 performance, escalabilidade, usabilidade.<\/p>\r\n\r\n\r\n\r\n
Mas, independente da decis\u00e3o, configurar o ambiente de programa\u00e7\u00e3o e gerir o progresso de desenvolvimento s\u00e3o fundamentais para um resultado esperado.\u00a0<\/p>\r\n\r\n\r\n\r\n
Visto isto, manter ferramentas com comunica\u00e7\u00e3o facilitada, de prefer\u00eancia, que comp\u00f5em o mesmo universo de tecnologia, ajuda e muito!<\/p>\r\n\r\n\r\n\r\n
Al\u00e9m de ter uma comunidade forte que colaboram muito para evoluir. Esses s\u00e3o pontos importantes para impulsionar o in\u00edcio da cria\u00e7\u00e3o de um projeto em React Native.<\/p>\r\n\r\n\r\n\r\n
Ferramentas para configura\u00e7\u00e3o do ambiente de Desenvolvimento\u00a0<\/strong><\/h2>\r\n\r\n\r\n\r\nEditores\u00a0<\/strong><\/h3>\r\n\r\n\r\n\r\nOs editores s\u00e3o as ferramentas utilizadas para programar, organizar as pastas do projeto, configurar depend\u00eancias e todos outros detalhes de projeto.\u00a0<\/p>\r\n\r\n\r\n\r\n
\r\n![\"projeto](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/06\/1_hello_world_app.png\")
\r\nExemplo de c\u00f3digo usando React Native<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nO editor de c\u00f3digo que utilizo para constru\u00e7\u00e3o das minhas apps mobile \u00e9 o Visual Studio Code<\/a><\/strong> da Microsoft.<\/p>\r\n\r\n\r\n\r\nPossibilita ter recursos como autocomplete, debugging e outras features presentes apenas em IDE’s. O VSCode <\/a><\/strong>n\u00e3o \u00e9 obrigat\u00f3rio e voc\u00ea pode utilizar o que preferir. Dentre os que eu recomendo est\u00e3o: Visual Studio Code, Sublime<\/strong> Text<\/strong><\/a>, Atom<\/a><\/strong>, Vim<\/a><\/strong>.\u00a0<\/p>\r\n\r\n\r\n\r\nEmuladores<\/strong><\/h3>\r\n\r\n\r\n\r\nPara testar nossas aplica\u00e7\u00f5es em dispositivos reais iremos utilizar emuladores que s\u00e3o apps que imitam o funcionamento de um dispositivo f\u00edsico dentro do nosso\u00a0sistema.<\/p>\r\n\r\n\r\n\r\n
Um ponto desfavor\u00e1vel para Windows e no Linux \u00e9 que ainda n\u00e3o \u00e9 poss\u00edvel configurar um emulador de iOS de forma nativa.\u00a0<\/p>\r\n\r\n\r\n\r\n
Para termos um ambiente de desenvolvimento para Android iremos instalar a SDK do Android <\/a><\/strong>com ferramentas adicionais para executarmos nossa app em um emulador.<\/p>\r\n\r\n\r\n\r\nAo fim desse guia, voc\u00ea tamb\u00e9m poder\u00e1 emular sua aplica\u00e7\u00e3o em seu dispositivo f\u00edsico utilizando USB. O ambiente Android pode ser configurado no Mac OS X, Linux e Windows.\u00a0<\/em><\/p>\r\n\r\n\r\n\r\nUtilizaremos o Genymotion <\/a><\/strong>como emulador do Android.\u00a0<\/p>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/03\/genny-1024x516.png\")
\r\nGenymotion com React Native<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nEscolhemos o Genymotion pelo fato de ser mais est\u00e1vel e r\u00e1pido, mas voc\u00ea pode escolher utilizar o emulador do Android Studio. Antes de instalar o Genymotion vamos instalar o VirtualBox<\/a>.<\/p>\r\n\r\n\r\n\r\nPara ambientes Linux basta executar o seguinte comando no terminal:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo apt-get install virtualbox\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nPara ambientes Mac OS X ou Window<\/em>s voc\u00ea pode instal\u00e1-lo<\/strong><\/a> ou optar por instalar junto com o Genymotion.\u00a0<\/p>\r\n\r\n\r\n\r\nAgora vamos acessar o site do Genymotion e clicar no bot\u00e3o “Download Genymotion Personal Edition”.<\/p>\r\n\r\n\r\n\r\n
O Genymotion vai pedir que voc\u00ea crie\u00a0uma conta na plataforma, realize esse processo e depois voc\u00ea poder\u00e1 baixar o software.<\/p>\r\n\r\n\r\n\r\n
Agora, em ambientes Mac OSX ou Windows, basta instalar o software e abri-lo atrav\u00e9s de seus execut\u00e1veis.<\/p>\r\n\r\n\r\n\r\n
Caso esteja no Linux, precisamos realizar um processo a mais: extraia o arquivo .bin baixado do site do Genymotion em uma pasta de sua escolha e acesse-a via terminal.<\/p>\r\n\r\n\r\n\r\n
Acesse a pasta do arquivo extra\u00eddo execute o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
chmod +x genymotion-2.2.2 x64.bin\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n.\/g<\/em>enymotion-2.2.2 x64.bin\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nCom isso, o Genymotion ser\u00e1 instalado em seu sistema e voc\u00ea j\u00e1 pode acess\u00e1-lo a partir da pasta de instala\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
Por padr\u00e3o a pasta que o Genymotion \u00e9 instalado \u00e9 \/home\/<\/em>[usuario]\/<\/em>genymotion\/<\/code>.<\/p>\r\n\r\n\r\n\r\nAcesse essa pasta pelo terminal e execute o seguinte comando para abrir o Genymotion:\u00a0<\/p>\r\n\r\n\r\n\r\n
.\/ge<\/em>nymotion\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nComo o Genymotion aberto, vamos acessar as preferences e clicar no bot\u00e3o Settings. Na aba Account fa\u00e7a login com sua conta criada no site do Genymotion.<\/p>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/06\/login.png\")
\r\nExemplo de Sign In no Genymotion<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nAp\u00f3s realizado login, ainda no menu Settings, na aba ADB, precisamos informar o caminho da nossa SDK do Android.<\/p>\r\n\r\n\r\n\r\n
Selecione a op\u00e7\u00e3o Use Custom Android SDK Tools no Genymotion e utilize o caminho onde voc\u00ea extraiu os arquivos baixados do site do Android anteriormente. Por exemplo: C:\\Android Sdk ou\u00a0Android\/Sdk<\/code>.\u00a0<\/p>\r\n\r\n\r\n\r\nAgora, fechando as configura\u00e7\u00f5es, voltando a tela principal do Genymotion para adicionar o emulador espec\u00edfico.<\/p>\r\n\r\n\r\n\r\n
V<\/em>ou utilizar um Samsung Galaxy S8 – 7.0.0 API 24 mas aqui voc\u00ea pode selecionar a op\u00e7\u00e3o que mais lhe agradar, tente utilizar sempre\u00a0v<\/em>ers\u00f5es mais recentes do Android.<\/p>\r\n\r\n\r\n\r\nSelecione a op\u00e7\u00e3o e clique em Next.<\/p>\r\n\r\n\r\n\r\n
Depois disso ele ir\u00e1 te pedir um nome para o emulador, coloque o que preferir ou deixe o padr\u00e3o.<\/p>\r\n\r\n\r\n\r\n
Depois disso clique em Next novamente e aguarde o download das depend\u00eancias. Ao acabar o processo voc\u00ea ter\u00e1 um novo emulador na lista inicial do Genymotion:\u00a0<\/p>\r\n\r\n\r\n\r\n
Com dois cliques em cima do Emulador ser\u00e1 poss\u00edvel executar o ambiente Android.<\/p>\r\n\r\n\r\n\r\n
Caso voc\u00ea receba algum erro durante esse processo, recomendo executar a m\u00e1quina virtual do Android diretamente pelo VirtualBox pois dessa forma voc\u00ea ter\u00e1 o log de inicializa\u00e7\u00e3o do ambiente que conter\u00e1 qualquer poss\u00edvel erro.\u00a0<\/p>\r\n\r\n\r\n\r\n
A \u00faltima etapa \u00e9 conectar o emulador ao ADB, pelo IP do dispositivo. Para verificar o IP do dispositivo, basta esticar a janela do emulador, o IP estar\u00e1 no t\u00edtulo da janela. No terminal, rode o comando.<\/p>\r\n\r\n\r\n\r\n
adb connect IP DO SEU EMULADOR:5555\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nLogo ap\u00f3s, rode:\u00a0<\/p>\r\n\r\n\r\n\r\n
adb devices\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSe aparecer o nome do seu dispositivo na lista, seu emulador foi conectado com sucesso!<\/p>\r\n\r\n\r\n\r\n
Com o emulador aberto, basta rodar react-native run-android<\/code> na pasta do seu projeto.\u00a0<\/p>\r\n\r\n\r\n\r\nReact Native no Ambiente Windows<\/strong><\/h2>\r\n\r\n\r\n\r\nNo sistema Windows, vamos instalar as libs com um gerenciador de pacotes.<\/p>\r\n\r\n\r\n\r\n
Para configurar o ambiente Android no Windows, vamos precisar instalar quatro depend\u00eancias: Node, Python2, JDK e a SDK do Android.<\/p>\r\n\r\n\r\n\r\n
Para completar essas depend\u00eancias, vamos precisar de instalar o Chocolatey e as demais depend\u00eancias, instalar e configurar a SDK do Android, instalar e configurar o emulador Genymotion.\u00a0<\/p>\r\n\r\n\r\n\r\n
Vamos utilizar um gerenciador de pacotes do Windows chamado Chocolatey para instalar as libs no Windows. Essa ferramenta nos possibilita instalar depend\u00eancias e ferramentas no sistema com poucos comandos e tudo pelo terminal.<\/p>\r\n\r\n\r\n\r\n
Execute o prompt de comando ou powershell como administrador utilizando a tecla Windows + X ou clicando com o bot\u00e3o direito sobre o bot\u00e3o \u201cIniciar”.<\/p>\r\n\r\n\r\n\r\n
Agora, voc\u00ea deve executar os comandos de acordo com a op\u00e7\u00e3o que voc\u00ea clicou.\u00a0<\/p>\r\n\r\n\r\n\r\n
Caso a op\u00e7\u00e3o que voc\u00ea tenha clicado tenha o nome de Command Prompt, execute o comando abaixo na janela aberta para instalar o Chocolatey:<\/p>\r\n\r\n\r\n\r\n
@\"%SystemRoot%\\System32\\Windows PowerShell\\v1.0\\pow<\/em>ershell.exe\" - NOProfile -Input Format None -Execution Policy Bypass -Command \"iex ( (New-Object System.Net.Webclient). DownloadString('https:\/\/c<\/em>hocolatey.org\/<\/em>ins tall.psl'))\" && <\/em>SET \"PATH='PATH%;<\/em>%ALLUSERSPROFILE%\\chocolatey<\/em>\\bin\"<\/code><\/p>\r\n\r\n\r\n\r\nCaso a op\u00e7\u00e3o tenha sido Powershell, execute o comando abaixo para verificar se voc\u00ea possui permiss\u00f5es para instalar depend\u00eancias com o terminal:<\/p>\r\n\r\n\r\n\r\n
Get-Execution Policy\u00a0<\/em><\/code><\/p>\r\n\r\n\r\n\r\nSe o retorno desse comando for “Restricted”, execute o pr\u00f3ximo comando em seu terminal, se n\u00e3o, prossiga para o pr\u00f3ximo passo:<\/p>\r\n\r\n\r\n\r\n
Set-Execution Policy AllSigned\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nAgora, execute o seguinte comando para instalar o Chocolatey:\u00a0<\/p>\r\n\r\n\r\n\r\n
Set-Execution Policy Bypass -Scope Process -Force; iex\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n( (New-Object\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSystem.Net.WebClient) . DownloadString('https:\/\/chocolatey.org\/ins\u00a0<\/code><\/p>\r\n\r\n\r\n\r\ntall.psl'))\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nAgora, teste se a instala\u00e7\u00e3o ocorreu corretamente executando o seguinte comando no seu terminal (nada ir\u00e1 acontecer, mas n\u00e3o deve retornar erros). Nesse passo pode ser necess\u00e1rio reiniciar seu terminal.\u00a0<\/p>\r\n\r\n\r\n\r\n
choco<\/code><\/p>\r\n\r\n\r\n\r\nAgora vamos instalar o Node, Python2 e a JDK8 (Java Development Kit 8).<\/p>\r\n\r\n\r\n\r\n
choco install -y nodejs.install python2 jdk8\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSe voc\u00ea tiver o NodeJS j\u00e1 instalado em sua m\u00e1quina, certifique-se que sua vers\u00e3o \u00e9 superior a 7 e, <\/em>caso esteja com o JDK instalado em sua m\u00e1quina, certifique-se que sua vers\u00e3o seja a 8.\u00a0<\/p>\r\n\r\n\r\n\r\nAgora com as depend\u00eancias instaladas, vamos instalar o CLI (Command Line Interface) do React Native que nos ajudar\u00e1 na cria\u00e7\u00e3o e teste de novos projetos. Nesse passo voc\u00ea provavelmente deve reiniciar seu terminal para o comando funcionar.\u00a0<\/p>\r\n\r\n\r\n\r\n
npm install -q react-native-cli<\/code><\/p>\r\n\r\n\r\n\r\nSe tudo ocorreu bem at\u00e9 aqui, voc\u00ea conseguir\u00e1 executar o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
react-native -h<\/code><\/p>\r\n\r\n\r\n\r\nEsse comando deve exibir uma lista de comandos poss\u00edveis para serem executados com o React Native CLI.\u00a0<\/p>\r\n\r\n\r\n\r\n
Agora, vamos configurar o SDK do Android no Windows, crie uma pasta em um local desejado para instala\u00e7\u00e3o da SDK. Por exemplo, C:\\Android\\Sdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/06\/androidsdk.png\")
\r\nAndroid SDK<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nAnote esse caminho para ser utilizado posteriormente\u00a0<\/p>\r\n\r\n\r\n\r\n
Na op\u00e7\u00e3o “Command line tools only” baixe a SDK referente ao seu sistema operacional.\u00a0<\/p>\r\n\r\n\r\n\r\n
Ap\u00f3s feito o Download, extraia o conte\u00fado do pacote para a pasta criada no passo anterior.\u00a0<\/p>\r\n\r\n\r\n\r\n
Agora, no Painel de Controle do Window<\/em>s:<\/p>\r\n\r\n\r\n\r\n\r\n- Abra o item “Sistema e Seguran\u00e7a” ou “Sistema”;<\/li>\r\n
- Clique em “Configura\u00e7\u00f5es avan\u00e7adas do sistema”;<\/li>\r\n
- Selecione “Vari\u00e1veis de ambiente”;<\/li>\r\n
- Clique no bot\u00e3o “Nova vari\u00e1vel de ambiente”;<\/li>\r\n
- Indique o nome da vari\u00e1vel como ANDROID_HOME;<\/li>\r\n
- Adicione o caminho utilizado acima (Ex: C:\\Android\\Sdk) como segundo par\u00e2metro e clique em OK.\u00a0<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
Na mesma janela de “Vari\u00e1veis de ambiente” no Windows, clique na vari\u00e1vel PATH e ent\u00e3o em “Editar”. Haver\u00e1 uma lista de caminhos e voc\u00ea deve adicionar esses dois novos caminhos no fim da lista:\u00a0<\/p>\r\n\r\n\r\n\r\n
ANDROID HOME \\platform-tools\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n%ANDROID HOME%\\tools\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSe sua vers\u00e3o do Windows for menor que a 10, sempre coloque ponto-e-virgula “;” no final dos caminhos para eles n\u00e3o se juntarem.<\/p>\r\n\r\n\r\n\r\n
Agora, abra seu Command Prompt ou PowerShell como administrador e execute o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
Command Prompt\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nC:\\Android Sdk\\tools\\bin\\sdkmanager \"platform-tools\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\"platforms; android-27\" \"build-tools;27.0.3\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nPowerShell\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nPS C:\\Android\\Sdk\\tools\\bin> .Isdkmanager.bat\u00a0 \"platform-tools\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\"platforms; android-27\" \"build-tools;27.0.3\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n*Aceite todas licen\u00e7as digitando quando necess\u00e1rio.\u00a0<\/p>\r\n\r\n\r\n\r\n
React Native no Ambiente Linux\u00a0<\/h2>\r\n\r\n\r\n\r\n
No sistema ambiente Linux, instalar as libs pelo apt-get.<\/p>\r\n\r\n\r\n\r\n
Para configurar o ambiente Android no Linux precisamos:<\/p>\r\n\r\n\r\n\r\n
\r\n- Instalar NodeJS, JDK e demais depend\u00eancias: instalar depend\u00eancias, instalar<\/li>\r\n
- SDK do Android: configurar SDK, instalar e configurar o emulador<\/li>\r\n
- Genymotion: configurar Emulador. Instalar depend\u00eancias.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
Para configurar o ambiente Android no Linux, vamos precisar instalar 2 depend\u00eancias: Node e JDK.\u00a0<\/p>\r\n\r\n\r\n\r\n
Ubuntu (deb), Instalando CURL.<\/p>\r\n\r\n\r\n\r\n
Certifique-se que voc\u00ea tenha o CURL instalado executando o seguinte comando no terminal:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo apt-get install curl\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nInstalando NodeJS, agora com o CURL instalado, vamos instalar no NodeJS utilizando os seguintes comandos:\u00a0<\/p>\r\n\r\n\r\n\r\n
curl -SL https:\/\/d<\/em>eb.nodesource.com\/<\/em>setup 10.x \/ sudo bash -\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt install nodejs\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nCaso voc\u00ea n\u00e3o esteja em distribui\u00e7\u00f5es Debian\/Ubuntu, siga os passos para instala\u00e7\u00e3o de acordo com seu sistema:\u00a0<\/p>\r\n\r\n\r\n\r\n
Instalar o React Native CLI<\/a><\/strong>. Com o NodeJS instalado, podemos instalar o CLI (Command Line Interface) do React Native:\u00a0<\/p>\r\n\r\n\r\n\r\nsudo npm install -g react-native-cli\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nInstalando JDK (Java Development Kit). Agora precisamos instalar a JDK (<\/em>Java Development Kit) na vers\u00e3o 8 com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\nsudo add-apt-repository ppa:openjdk-r\/ppa\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt-get update\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt-get install openjdk-8-jdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nA vers\u00e3o 8 do JDK \u00e9 obrigat\u00f3ria, n\u00e3o utilize vers\u00f5es mais recentes. Podemos testar a instala\u00e7\u00e3o do JDK com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
java -version\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nCaso possua outras vers\u00f5es do Java<\/a><\/strong>, pode selecionar a vers\u00e3o 8 como padr\u00e3o usando o comando:\u00a0<\/p>\r\n\r\n\r\n\r\nsudo update-alternatives --config java\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nInstalando libs gr\u00e1ficas. Em grande parte das vezes precisamos instalar algumas bibliotecas da vers\u00e3o 32bits do Linux para conseguir emular nosso projeto e para isso vamos utilizar o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo apt-get install gcc-multilib lib32z1 lib32 stdc++6\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nArch Linux. Instalando NodeJS. Vamos instalar o NodeJS utilizando o seguintes comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo pacman -S nodejs npm\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nInstalando React Native CLI. Com o NodeJS instalado, podemos instalar o CLI (Command Line Interface) do React Native:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo npm install -g react-native-cli<\/code><\/p>\r\n\r\n\r\n\r\nInstalando JDK (Jav<\/em>a Dev<\/em>elopment Kit). Agora precisamos instalar a JDK (Java Development Kit) na vers\u00e3o 8 com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\nsudo pacman -S jdk8-openjdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nA vers\u00e3o 8 do JDK \u00e9 obrigat\u00f3ria, n\u00e3o utilize vers\u00f5es mais recentes. Para isso, podemos defini-lo como padr\u00e3o com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n
archlinux-java set java-8-openjdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nInstalando libs gr\u00e1ficas. Em grande parte das vezes precisamos instalar algumas bibliotecas da vers\u00e3o 32bits do Linux para conseguir emular nosso projeto e para isso vamos utilizar o seguinte comando para habilitar o reposit\u00f3rio multilib:\u00a0<\/p>\r\n\r\n\r\n\r\n
sudo sed -i \"\\[multilib\\]\/, \/ <\/em>Include\/\"'s\/^<\/em>\u00ab\/\/' \/e<\/em>tc\/<\/em>pacman.conf\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nConfigurando SDK do Android no Linux. Crie uma pasta em um local desejado para instala\u00e7\u00e3o da SDK. Ex:\u00a0<\/p>\r\n\r\n\r\n\r\n
Te indico esse artigo, caso fique em d\u00favida para escolher Ionic ou React Native<\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\n Trata-se de uma nova tecnologia mas j\u00e1 demonstra grande popularidade, sua aceita\u00e7\u00e3o no universo de desenvolvimento foi r\u00e1pida.<\/p>\r\n\r\n\r\n\r\n Ter sido lan\u00e7ada pelo Facebook \u00e9 um dos motivos, mas permitir desenvolver utilizando apenas JavaScript na cria\u00e7\u00e3o, manipula\u00e7\u00e3o, desenvolver elementos em tela, inputs de texto, bot\u00f5es e quaisquer itens\u00a0do projeto, encapsular todo c\u00f3digo nativo \u00e9 a principal vantagem na escolha de tecnologia de projeto.\u00a0<\/p>\r\n\r\n\r\n\r\n Quanto \u00e0s tecnologias h\u00edbridas, o React Native cria componentes nativos em tela, n\u00e3o cria web views em HTML<\/a><\/strong>, IS, CSS, n\u00e3o sendo uma biblioteca h\u00edbrida, e assim, renderizando componentes nativos.\u00a0<\/p>\r\n\r\n\r\n\r\n Buscando desenvolver uma aplica\u00e7\u00e3o que d\u00ea a seus usu\u00e1rios uma experi\u00eancia nativa com alta performance, o React Native \u00e9 lan\u00e7ado com essa proposta.\u00a0<\/p>\r\n\r\n\r\n\r\n Esses resultados s\u00e3o comprovados quando vemos nomes como, Facebook Ads, Uber Eats, AirBnB, Discord, Instagram, Walmart desenvolverem aplica\u00e7\u00f5es escal\u00e1veis e com altos n\u00edveis de exig\u00eancia.\u00a0<\/p>\r\n\r\n\r\n\r\n Reunindo todas as vantagens de uma aplica\u00e7\u00e3o nativa de fluxo de desenvolvimento similar a web e com f\u00e1cil portabilidade entre plataformas e dispositivos, se provou uma das melhores solu\u00e7\u00f5es para o desenvolvimento mobile.<\/p>\r\n\r\n\r\n\r\n Tornar-se um desenvolvedor \u00e9 uma tarefa que exige plano e dedica\u00e7\u00e3o. Temos a facilidade da consulta da informa\u00e7\u00e3o que, ao mesmo tempo, se n\u00e3o houver organiza\u00e7\u00e3o, dificulta e tardia os resultados.<\/p>\r\n\r\n\r\n\r\n Por isso, \u00e9 importante:<\/p>\r\n\r\n\r\n\r\n Estes s\u00e3o os m\u00e9todos que eu consegui montar o meu processo de estudos, colhi resultados com maior agilidade e motiva\u00e7\u00e3o para estudar e desenvolver projetos mais desafiadores.<\/p>\r\n\r\n\r\n\r\n Desenvolver um aplicativo, em qualquer linguagem, requer alguns cuidados, como analisar onde quero chegar com essa solu\u00e7\u00e3o em rela\u00e7\u00e3o \u00e0 performance, escalabilidade, usabilidade.<\/p>\r\n\r\n\r\n\r\n Mas, independente da decis\u00e3o, configurar o ambiente de programa\u00e7\u00e3o e gerir o progresso de desenvolvimento s\u00e3o fundamentais para um resultado esperado.\u00a0<\/p>\r\n\r\n\r\n\r\n Visto isto, manter ferramentas com comunica\u00e7\u00e3o facilitada, de prefer\u00eancia, que comp\u00f5em o mesmo universo de tecnologia, ajuda e muito!<\/p>\r\n\r\n\r\n\r\n Al\u00e9m de ter uma comunidade forte que colaboram muito para evoluir. Esses s\u00e3o pontos importantes para impulsionar o in\u00edcio da cria\u00e7\u00e3o de um projeto em React Native.<\/p>\r\n\r\n\r\n\r\n Os editores s\u00e3o as ferramentas utilizadas para programar, organizar as pastas do projeto, configurar depend\u00eancias e todos outros detalhes de projeto.\u00a0<\/p>\r\n\r\n\r\n\r\n O editor de c\u00f3digo que utilizo para constru\u00e7\u00e3o das minhas apps mobile \u00e9 o Visual Studio Code<\/a><\/strong> da Microsoft.<\/p>\r\n\r\n\r\n\r\n Possibilita ter recursos como autocomplete, debugging e outras features presentes apenas em IDE’s. O VSCode <\/a><\/strong>n\u00e3o \u00e9 obrigat\u00f3rio e voc\u00ea pode utilizar o que preferir. Dentre os que eu recomendo est\u00e3o: Visual Studio Code, Sublime<\/strong> Text<\/strong><\/a>, Atom<\/a><\/strong>, Vim<\/a><\/strong>.\u00a0<\/p>\r\n\r\n\r\n\r\n Para testar nossas aplica\u00e7\u00f5es em dispositivos reais iremos utilizar emuladores que s\u00e3o apps que imitam o funcionamento de um dispositivo f\u00edsico dentro do nosso\u00a0sistema.<\/p>\r\n\r\n\r\n\r\n Um ponto desfavor\u00e1vel para Windows e no Linux \u00e9 que ainda n\u00e3o \u00e9 poss\u00edvel configurar um emulador de iOS de forma nativa.\u00a0<\/p>\r\n\r\n\r\n\r\n Para termos um ambiente de desenvolvimento para Android iremos instalar a SDK do Android <\/a><\/strong>com ferramentas adicionais para executarmos nossa app em um emulador.<\/p>\r\n\r\n\r\n\r\n Ao fim desse guia, voc\u00ea tamb\u00e9m poder\u00e1 emular sua aplica\u00e7\u00e3o em seu dispositivo f\u00edsico utilizando USB. O ambiente Android pode ser configurado no Mac OS X, Linux e Windows.\u00a0<\/em><\/p>\r\n\r\n\r\n\r\n Utilizaremos o Genymotion <\/a><\/strong>como emulador do Android.\u00a0<\/p>\r\n\r\n\r\n\r\n Escolhemos o Genymotion pelo fato de ser mais est\u00e1vel e r\u00e1pido, mas voc\u00ea pode escolher utilizar o emulador do Android Studio. Antes de instalar o Genymotion vamos instalar o VirtualBox<\/a>.<\/p>\r\n\r\n\r\n\r\n Para ambientes Linux basta executar o seguinte comando no terminal:\u00a0<\/p>\r\n\r\n\r\n\r\n Para ambientes Mac OS X ou Window<\/em>s voc\u00ea pode instal\u00e1-lo<\/strong><\/a> ou optar por instalar junto com o Genymotion.\u00a0<\/p>\r\n\r\n\r\n\r\n Agora vamos acessar o site do Genymotion e clicar no bot\u00e3o “Download Genymotion Personal Edition”.<\/p>\r\n\r\n\r\n\r\n O Genymotion vai pedir que voc\u00ea crie\u00a0uma conta na plataforma, realize esse processo e depois voc\u00ea poder\u00e1 baixar o software.<\/p>\r\n\r\n\r\n\r\n Agora, em ambientes Mac OSX ou Windows, basta instalar o software e abri-lo atrav\u00e9s de seus execut\u00e1veis.<\/p>\r\n\r\n\r\n\r\n Caso esteja no Linux, precisamos realizar um processo a mais: extraia o arquivo .bin baixado do site do Genymotion em uma pasta de sua escolha e acesse-a via terminal.<\/p>\r\n\r\n\r\n\r\n Acesse a pasta do arquivo extra\u00eddo execute o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Com isso, o Genymotion ser\u00e1 instalado em seu sistema e voc\u00ea j\u00e1 pode acess\u00e1-lo a partir da pasta de instala\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n Por padr\u00e3o a pasta que o Genymotion \u00e9 instalado \u00e9 Acesse essa pasta pelo terminal e execute o seguinte comando para abrir o Genymotion:\u00a0<\/p>\r\n\r\n\r\n\r\n Como o Genymotion aberto, vamos acessar as preferences e clicar no bot\u00e3o Settings. Na aba Account fa\u00e7a login com sua conta criada no site do Genymotion.<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s realizado login, ainda no menu Settings, na aba ADB, precisamos informar o caminho da nossa SDK do Android.<\/p>\r\n\r\n\r\n\r\n Selecione a op\u00e7\u00e3o Use Custom Android SDK Tools no Genymotion e utilize o caminho onde voc\u00ea extraiu os arquivos baixados do site do Android anteriormente. Por exemplo: Agora, fechando as configura\u00e7\u00f5es, voltando a tela principal do Genymotion para adicionar o emulador espec\u00edfico.<\/p>\r\n\r\n\r\n\r\n V<\/em>ou utilizar um Samsung Galaxy S8 – 7.0.0 API 24 mas aqui voc\u00ea pode selecionar a op\u00e7\u00e3o que mais lhe agradar, tente utilizar sempre\u00a0v<\/em>ers\u00f5es mais recentes do Android.<\/p>\r\n\r\n\r\n\r\n Selecione a op\u00e7\u00e3o e clique em Next.<\/p>\r\n\r\n\r\n\r\n Depois disso ele ir\u00e1 te pedir um nome para o emulador, coloque o que preferir ou deixe o padr\u00e3o.<\/p>\r\n\r\n\r\n\r\n Depois disso clique em Next novamente e aguarde o download das depend\u00eancias. Ao acabar o processo voc\u00ea ter\u00e1 um novo emulador na lista inicial do Genymotion:\u00a0<\/p>\r\n\r\n\r\n\r\n Com dois cliques em cima do Emulador ser\u00e1 poss\u00edvel executar o ambiente Android.<\/p>\r\n\r\n\r\n\r\n Caso voc\u00ea receba algum erro durante esse processo, recomendo executar a m\u00e1quina virtual do Android diretamente pelo VirtualBox pois dessa forma voc\u00ea ter\u00e1 o log de inicializa\u00e7\u00e3o do ambiente que conter\u00e1 qualquer poss\u00edvel erro.\u00a0<\/p>\r\n\r\n\r\n\r\n A \u00faltima etapa \u00e9 conectar o emulador ao ADB, pelo IP do dispositivo. Para verificar o IP do dispositivo, basta esticar a janela do emulador, o IP estar\u00e1 no t\u00edtulo da janela. No terminal, rode o comando.<\/p>\r\n\r\n\r\n\r\n Logo ap\u00f3s, rode:\u00a0<\/p>\r\n\r\n\r\n\r\n Se aparecer o nome do seu dispositivo na lista, seu emulador foi conectado com sucesso!<\/p>\r\n\r\n\r\n\r\n Com o emulador aberto, basta rodar No sistema Windows, vamos instalar as libs com um gerenciador de pacotes.<\/p>\r\n\r\n\r\n\r\n Para configurar o ambiente Android no Windows, vamos precisar instalar quatro depend\u00eancias: Node, Python2, JDK e a SDK do Android.<\/p>\r\n\r\n\r\n\r\n Para completar essas depend\u00eancias, vamos precisar de instalar o Chocolatey e as demais depend\u00eancias, instalar e configurar a SDK do Android, instalar e configurar o emulador Genymotion.\u00a0<\/p>\r\n\r\n\r\n\r\n Vamos utilizar um gerenciador de pacotes do Windows chamado Chocolatey para instalar as libs no Windows. Essa ferramenta nos possibilita instalar depend\u00eancias e ferramentas no sistema com poucos comandos e tudo pelo terminal.<\/p>\r\n\r\n\r\n\r\n Execute o prompt de comando ou powershell como administrador utilizando a tecla Windows + X ou clicando com o bot\u00e3o direito sobre o bot\u00e3o \u201cIniciar”.<\/p>\r\n\r\n\r\n\r\n Agora, voc\u00ea deve executar os comandos de acordo com a op\u00e7\u00e3o que voc\u00ea clicou.\u00a0<\/p>\r\n\r\n\r\n\r\n Caso a op\u00e7\u00e3o que voc\u00ea tenha clicado tenha o nome de Command Prompt, execute o comando abaixo na janela aberta para instalar o Chocolatey:<\/p>\r\n\r\n\r\n\r\n Caso a op\u00e7\u00e3o tenha sido Powershell, execute o comando abaixo para verificar se voc\u00ea possui permiss\u00f5es para instalar depend\u00eancias com o terminal:<\/p>\r\n\r\n\r\n\r\n Se o retorno desse comando for “Restricted”, execute o pr\u00f3ximo comando em seu terminal, se n\u00e3o, prossiga para o pr\u00f3ximo passo:<\/p>\r\n\r\n\r\n\r\n Agora, execute o seguinte comando para instalar o Chocolatey:\u00a0<\/p>\r\n\r\n\r\n\r\n Agora, teste se a instala\u00e7\u00e3o ocorreu corretamente executando o seguinte comando no seu terminal (nada ir\u00e1 acontecer, mas n\u00e3o deve retornar erros). Nesse passo pode ser necess\u00e1rio reiniciar seu terminal.\u00a0<\/p>\r\n\r\n\r\n\r\n Agora vamos instalar o Node, Python2 e a JDK8 (Java Development Kit 8).<\/p>\r\n\r\n\r\n\r\n Se voc\u00ea tiver o NodeJS j\u00e1 instalado em sua m\u00e1quina, certifique-se que sua vers\u00e3o \u00e9 superior a 7 e, <\/em>caso esteja com o JDK instalado em sua m\u00e1quina, certifique-se que sua vers\u00e3o seja a 8.\u00a0<\/p>\r\n\r\n\r\n\r\n Agora com as depend\u00eancias instaladas, vamos instalar o CLI (Command Line Interface) do React Native que nos ajudar\u00e1 na cria\u00e7\u00e3o e teste de novos projetos. Nesse passo voc\u00ea provavelmente deve reiniciar seu terminal para o comando funcionar.\u00a0<\/p>\r\n\r\n\r\n\r\n Se tudo ocorreu bem at\u00e9 aqui, voc\u00ea conseguir\u00e1 executar o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Esse comando deve exibir uma lista de comandos poss\u00edveis para serem executados com o React Native CLI.\u00a0<\/p>\r\n\r\n\r\n\r\n Agora, vamos configurar o SDK do Android no Windows, crie uma pasta em um local desejado para instala\u00e7\u00e3o da SDK. Por exemplo, Anote esse caminho para ser utilizado posteriormente\u00a0<\/p>\r\n\r\n\r\n\r\n Na op\u00e7\u00e3o “Command line tools only” baixe a SDK referente ao seu sistema operacional.\u00a0<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s feito o Download, extraia o conte\u00fado do pacote para a pasta criada no passo anterior.\u00a0<\/p>\r\n\r\n\r\n\r\n Agora, no Painel de Controle do Window<\/em>s:<\/p>\r\n\r\n\r\n\r\n Na mesma janela de “Vari\u00e1veis de ambiente” no Windows, clique na vari\u00e1vel PATH e ent\u00e3o em “Editar”. Haver\u00e1 uma lista de caminhos e voc\u00ea deve adicionar esses dois novos caminhos no fim da lista:\u00a0<\/p>\r\n\r\n\r\n\r\n Se sua vers\u00e3o do Windows for menor que a 10, sempre coloque ponto-e-virgula “;” no final dos caminhos para eles n\u00e3o se juntarem.<\/p>\r\n\r\n\r\n\r\n Agora, abra seu Command Prompt ou PowerShell como administrador e execute o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n *Aceite todas licen\u00e7as digitando quando necess\u00e1rio.\u00a0<\/p>\r\n\r\n\r\n\r\n No sistema ambiente Linux, instalar as libs pelo apt-get.<\/p>\r\n\r\n\r\n\r\n Para configurar o ambiente Android no Linux precisamos:<\/p>\r\n\r\n\r\n\r\n Para configurar o ambiente Android no Linux, vamos precisar instalar 2 depend\u00eancias: Node e JDK.\u00a0<\/p>\r\n\r\n\r\n\r\n Ubuntu (deb), Instalando CURL.<\/p>\r\n\r\n\r\n\r\n Certifique-se que voc\u00ea tenha o CURL instalado executando o seguinte comando no terminal:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando NodeJS, agora com o CURL instalado, vamos instalar no NodeJS utilizando os seguintes comandos:\u00a0<\/p>\r\n\r\n\r\n\r\n Caso voc\u00ea n\u00e3o esteja em distribui\u00e7\u00f5es Debian\/Ubuntu, siga os passos para instala\u00e7\u00e3o de acordo com seu sistema:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalar o React Native CLI<\/a><\/strong>. Com o NodeJS instalado, podemos instalar o CLI (Command Line Interface) do React Native:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando JDK (Java Development Kit). Agora precisamos instalar a JDK (<\/em>Java Development Kit) na vers\u00e3o 8 com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n A vers\u00e3o 8 do JDK \u00e9 obrigat\u00f3ria, n\u00e3o utilize vers\u00f5es mais recentes. Podemos testar a instala\u00e7\u00e3o do JDK com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Caso possua outras vers\u00f5es do Java<\/a><\/strong>, pode selecionar a vers\u00e3o 8 como padr\u00e3o usando o comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando libs gr\u00e1ficas. Em grande parte das vezes precisamos instalar algumas bibliotecas da vers\u00e3o 32bits do Linux para conseguir emular nosso projeto e para isso vamos utilizar o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Arch Linux. Instalando NodeJS. Vamos instalar o NodeJS utilizando o seguintes comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando React Native CLI. Com o NodeJS instalado, podemos instalar o CLI (Command Line Interface) do React Native:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando JDK (Jav<\/em>a Dev<\/em>elopment Kit). Agora precisamos instalar a JDK (Java Development Kit) na vers\u00e3o 8 com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n A vers\u00e3o 8 do JDK \u00e9 obrigat\u00f3ria, n\u00e3o utilize vers\u00f5es mais recentes. Para isso, podemos defini-lo como padr\u00e3o com o seguinte comando:\u00a0<\/p>\r\n\r\n\r\n\r\n Instalando libs gr\u00e1ficas. Em grande parte das vezes precisamos instalar algumas bibliotecas da vers\u00e3o 32bits do Linux para conseguir emular nosso projeto e para isso vamos utilizar o seguinte comando para habilitar o reposit\u00f3rio multilib:\u00a0<\/p>\r\n\r\n\r\n\r\n Configurando SDK do Android no Linux. Crie uma pasta em um local desejado para instala\u00e7\u00e3o da SDK. Ex:\u00a0<\/p>\r\n\r\n\r\n\r\nPor que usar React Native?<\/strong><\/h2>\r\n\r\n\r\n\r\n
React Native vs Flutter<\/a><\/strong><\/h2>\r\n\r\n\r\n\r\n
\r\nGigantes que utilizam React Native\u00a0<\/strong><\/h2>\r\n\r\n\r\n\r\n
\r\n
Empresas que usam React Native<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nProgramar em React Native<\/h2>\r\n\r\n\r\n\r\n
\r\n
Quais os desafios que eu vou enfrentar para fazer um app em React Native?<\/strong><\/h2>\r\n\r\n\r\n\r\n
Ferramentas para configura\u00e7\u00e3o do ambiente de Desenvolvimento\u00a0<\/strong><\/h2>\r\n\r\n\r\n\r\n
Editores\u00a0<\/strong><\/h3>\r\n\r\n\r\n\r\n
\r\nEmuladores<\/strong><\/h3>\r\n\r\n\r\n\r\n
\r\nsudo apt-get install virtualbox\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nchmod +x genymotion-2.2.2 x64.bin\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n.\/g<\/em>enymotion-2.2.2 x64.bin\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\/home\/<\/em>[usuario]\/<\/em>genymotion\/<\/code>.<\/p>\r\n\r\n\r\n\r\n.\/ge<\/em>nymotion\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\r\nC:\\Android Sdk ou\u00a0Android\/Sdk<\/code>.\u00a0<\/p>\r\n\r\n\r\n\r\nadb connect IP DO SEU EMULADOR:5555\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nadb devices\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n react-native run-android<\/code> na pasta do seu projeto.\u00a0<\/p>\r\n\r\n\r\n\r\nReact Native no Ambiente Windows<\/strong><\/h2>\r\n\r\n\r\n\r\n
@\"%SystemRoot%\\System32\\Windows PowerShell\\v1.0\\pow<\/em>ershell.exe\" - NOProfile -Input Format None -Execution Policy Bypass -Command \"iex ( (New-Object System.Net.Webclient). DownloadString('https:\/\/c<\/em>hocolatey.org\/<\/em>ins tall.psl'))\" && <\/em>SET \"PATH='PATH%;<\/em>%ALLUSERSPROFILE%\\chocolatey<\/em>\\bin\"<\/code><\/p>\r\n\r\n\r\n\r\nGet-Execution Policy\u00a0<\/em><\/code><\/p>\r\n\r\n\r\n\r\nSet-Execution Policy AllSigned\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSet-Execution Policy Bypass -Scope Process -Force; iex\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n( (New-Object\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nSystem.Net.WebClient) . DownloadString('https:\/\/chocolatey.org\/ins\u00a0<\/code><\/p>\r\n\r\n\r\n\r\ntall.psl'))\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nchoco<\/code><\/p>\r\n\r\n\r\n\r\nchoco install -y nodejs.install python2 jdk8\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nnpm install -q react-native-cli<\/code><\/p>\r\n\r\n\r\n\r\nreact-native -h<\/code><\/p>\r\n\r\n\r\n\r\nC:\\Android\\Sdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\r\n\r\n
ANDROID HOME \\platform-tools\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n%ANDROID HOME%\\tools\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nCommand Prompt\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nC:\\Android Sdk\\tools\\bin\\sdkmanager \"platform-tools\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\"platforms; android-27\" \"build-tools;27.0.3\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nPowerShell\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nPS C:\\Android\\Sdk\\tools\\bin> .Isdkmanager.bat\u00a0 \"platform-tools\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n\"platforms; android-27\" \"build-tools;27.0.3\"\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nReact Native no Ambiente Linux\u00a0<\/h2>\r\n\r\n\r\n\r\n
\r\n
sudo apt-get install curl\u00a0<\/code><\/p>\r\n\r\n\r\n\r\ncurl -SL https:\/\/d<\/em>eb.nodesource.com\/<\/em>setup 10.x \/ sudo bash -\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt install nodejs\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo npm install -g react-native-cli\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo add-apt-repository ppa:openjdk-r\/ppa\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt-get update\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt-get install openjdk-8-jdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\njava -version\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo update-alternatives --config java\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo apt-get install gcc-multilib lib32z1 lib32 stdc++6\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo pacman -S nodejs npm\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo npm install -g react-native-cli<\/code><\/p>\r\n\r\n\r\n\r\nsudo pacman -S jdk8-openjdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\narchlinux-java set java-8-openjdk\u00a0<\/code><\/p>\r\n\r\n\r\n\r\nsudo sed -i \"\\[multilib\\]\/, \/ <\/em>Include\/\"'s\/^<\/em>\u00ab\/\/' \/e<\/em>tc\/<\/em>pacman.conf\u00a0<\/code><\/p>\r\n\r\n\r\n\r\n
![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/03\/sdk-manager-platforms_2x-1024x693.jpg\")
\r\n