Você está aqui: React Native ::: Dicas & Truques ::: Passos Iniciais

Como instalar o React Native, configurar e escrever sua primeira aplicação React Native Android

Quantidade de visualizações: 77 vezes
Nesta dica mostrarei, de forma bem resumida, como baixar o React Native, fazer sua instalação no Windows, configurar com o Android Studio e escrever sua primeira aplicação Android (penso que roda também no iOS com pouquíssimas alterações).

Quais as ferramentas que necessito inicialmente?

A primeira coisa que você precisa para desenvolver aplicações mobile usando React Native e Android, é uma instalação atualizada do Java JDK, o ambiente de desenvolvimento para Java.

Assim, se você ainda não tem o Java JDK (Java Development Kit) instalado na sua máquina, direcione o seu navegador para https://www.oracle.com, faça o download e, após isso, a instalação. Tenha a certeza de instalar o Java JDK, e não somente o Java JRE, que é o runtime Java.

Finalizada a instalação, abra uma janela de comando e dispare os seguintes comandos:

C:\Users\Osmar>java -version
java version "1.8.0_311"
Java(TM) SE Runtime Environment (build 1.8.0_311-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.311-b11, 
mixed mode)

C:\Users\Osmar>javac -version
javac 16

Obteve resultado parecido? Não? Então vá até as variáveis de ambiente, tanto para o usuário quanto para o sistema e adicione o diretório "C:\Program Files\Java\jdk1.8.0_111\bin" na variável Path. O seu diretório poderá ser um pouco diferente do meu. Agora feche a janela de comandos, abra-a novamente e tente disparar os dois comandos novamente.

O passo seguinte é criar uma variável de ambiente chamada "JAVA_NOME", tanto para o usuário atual quanto para o sistema, e dar a ela o valor "C:\Program Files\Java\jdk1.8.0_111". Novamente o seu deve ser diferente, dependendo da sua versão do Java JDK.

Para se certificar de que está tudo funcionando corretamente, instale o Netbeans e experimente escrever, compilar e executar um "Hello, world!" em Java. Sim, você PRECISA saber escrever umas aplicações básicas em Java. Caso não goste de Netbeans, poderá experimentar o Eclipse ou outra IDE com suporte a Java.

Preciso instalar o Android Studio também?

Sim, se a sua idéia é desenvolver aplicações mobile para o Android, o Android Studio deverá estar instalado, configurado e funcionando corretamente na sua máquina. O principal nós já fizemos, ou seja, já instalamos e configuramos o Java JDK e o JRE (que já vem junto).

Tudo que você tem que fazer agora é instalar o Android Studio, indicar a ele o caminho da instalação do Java e escrever pelo menos um "Hello, World!" no Android Studio para se certificar de que tudo está funcionando conforme esperado. Ah, lembre-se de instalar o Google USB Driver, o que vai permitir que você desenvolva suas aplicações React Native diretamente no seu aparelho, sem ficar dependendo dos emuladores leeeeeeeeeeeeeeeentos que vêm com o Android Studio.

Para concluirmos a parte do Android Studio, vá até as variáveis de ambiente do usuário e do sistema, crie uma entrada chamada "ANDROID_HOME" e dê a ela o valor "C:\Users\Osmar\AppData\Local\Android\Sdk". É claro que o seu nome de usuário vai ser outro. Agora adicione o valor "C:\Users\Osmar\AppData\Local\Android\Sdk\platform-tools" à variável Path, tanto para o usuário quanto para o sistema.

O Java JDK está funcionando, e o Android Studio também já está funcionando. O que mais eu preciso?

Agora precisamos de uma instalação recente do Node.js. Para isso, direcione o seu navegador para https://nodejs.org/en/download e baixe os binários correspondentes para o seu Windows.

Finalizada a instalação, abra uma janela de terminal e dispare o comando:

C:\Users\Osmar>node -v
v14.15.4

Pronto! Se você conseguiu um resultado parecido nós já estamos quase finalizando o nosso tutorial de instalação do React Native.

Já estamos chegando?

Sim, já estamos chegando. Com o Java JDK já instalado, configurado e testado. Com o Android Studio já instalado, configurado e testado. Com o Node.js já instalado, configurado e testado, tudo que temos a fazer é criar um diretório para a nossa primeira aplicação (por exemplo: "c:\estudos_react_native", entrar nesse diretório via janela de terminal e disparar o comando:

C:\Users\Osmar>cd c:\estudos_react_native
npx react-native init Estudos

Vá buscar mais café, pois esse processo é um pouco demorado. O Node.js vai baixar o React Native e, por tabela, um monte de ferramentas adicionais. Se você perceber algum erro nessa etapa, verifique todos os passos que detalhamos anteriormente.

Vamos executar a aplicação React Native agora?

Voltou do seu café e não encontrou nenhuma mensagem de erro? Que maravilha. Agora, via janela de comando, entre no diretório da aplicação que criamos e dispare o comando:

c:\estudos_react_native>cd Estudos
c:\estudos_react_native\Estudos>npx react-native run-android

Aguarde mais alguns segundos e você verá o seguinte resultado no emulador do Android ou diretamente no seu celular, caso você tenha optado pela depuração via USB (o que exige também habilitar essa função no modo desenvolvedor do Android do seu celular):



Correu tudo bem? Agora abra o arquivo App.js na raiz da aplicação e experimente fazer algumas alterações. Ao salvar o arquivo você já verá as modificações serem refletidas imediatamente no emulador ou no seu celular. Sim, essa é uma das vantagens do React Native e do Flutter em relação ao desenvolvimento normal de aplicações Android usando apenas o Android Studio.

Abri o arquivo App.js e não entendi nada do código. Não tem algo mais básico para começar?

Sim, o código gerado automaticamente no App.js pode ser um pouco intimidador para quem está começando. Assim, vamos alterá-lo para o famoso "Hello, World". Abra o arquivo App.js novamente no seu editor de códigos e altere o seu conteúdo para:

import React, {Component} from 'react';  
import {Text, View} from 'react-native';  
  
type Props = {};  
export default class App extends Component<Props> {  
  render() {  
    return (  
      <View>  
        <Text>Olá, mundão sem porteira!</Text>  
      </View>  
    );  
  }  
}

Salve e você terá o seguinte resultado:



Pronto! Com esse código mais enxuto você poderá estudar à vontade agora, adicionando e removendo elementos, salvando e observando os resultado.


React Native ::: React Native - Componentes Visuais ::: Image

Como exibir imagens e fotos em aplicações React Native usando o componente Image

Quantidade de visualizações: 29 vezes
O componente Image do React Native é usado quando queremos carregar imagens e exibí-las em nossas aplicações mobile. Este componente possibilita a exibição de diferentes tipos de imagens, incluindo imagens remotas (em um site, por exemplo), recursos estáticos, imagens em locais temporários e imagens a partir do armazenamento local, tais como imagens da câmera.

Veja uma aplicação React Native completa que mostra como carregar uma imagem da internet e exibí-la em um componente Image. Note que a imagem a ser exibida é a logo do nosso site. Eis o código:

import React, {Component} from 'react';  
import {Image, View} from 'react-native';  
   
type Props = {};  
export default class App extends Component<Props> {  
  render() {  
    return (        
      <View style={{padding: 10, flexDirection: 'column'}}>  
        <Image style={{width: 237, height: 49}} source={{uri:
           'https://www.arquivodecodigos.com.br/logo2.jpg'}} /> 
      </View>  
    );  
  }
}

É importante observar que, quando a imagem estiver sendo carregada de uma rede (internet, por exemplo) ou via propriedade data, temos que, manualmente, indicar as dimensões da imagem a ser exibida.


React Native ::: React Native - Componentes Visuais ::: Button

Como detectar um clique em um botão do React Native e exibir uma mensagem Alert

Quantidade de visualizações: 33 vezes
Nesta dica mostrarei como detectar um evento onPress em um botão do React Native e exibir uma mensagem usando o método alert() do componente Alert. Note que o evento onPress é disparado quando o usuário pressiona o botão.

Veja o código completo para o exemplo:

import React, {Component} from 'react';  
import {View, Button, Alert} from 'react-native';  
  
type Props = {};  
export default class App extends Component<Props> {  
  render() {  
    return (  
      <View style={{backgroundColor: '#eeeeee',
        padding: 30}}>  
        <Button onPress = {() => 
          Alert.alert("Bem-vindo(a) ao React Native")} 
          title="Clique" />
      </View>  
    );  
  }  
}

Veja que este exemplo define o código a ser chamado quando o botão for clicado diretamente em sua declaração. Em outras dicas dessa seção você verá como clicar no botão e chamar uma função JavaScript residente fora da declaração do botão.


Veja mais Dicas e truques de React Native

Dicas e truques de outras linguagens

Quem Somos

Osmar J. Silva
WhatsApp +55 (062) 98553-6711

Goiânia-GO
Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Elétrica pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 15 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
José de Angelis
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..

Linguagens Mais Populares

1º lugar: Java
2º lugar: C#
3º lugar: PHP
4º lugar: Delphi
5º lugar: Python
6º lugar: JavaScript
7º lugar: C
8º lugar: C++
9º lugar: VB.NET
10º lugar: JSP (Java Server Pages)



© 2021 Arquivo de Códigos - Todos os direitos reservados | Versión en Español | Versão em Português