 |
|
||||
Você está aqui: React Native ::: Dicas & Truques ::: Passos Iniciais |
Como instalar o React Native, configurar e escrever sua primeira aplicação React Native AndroidQuantidade de visualizações: 1173 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: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 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: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 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: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 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: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 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: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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. |
 Link para compartilhar na Internet ou com seus amigos: |
React Native ::: React Native - Componentes Visuais ::: Button |
Como detectar um clique em um botão do React Native e exibir uma mensagem AlertQuantidade de visualizações: 1287 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: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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. |
React Native ::: React Native - Componentes Visuais ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 1004 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: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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. |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Serviços preliminares e instalações provisórias Precisa-se produzir 600.000 m3 de concreto para a construção de uma barragem no prazo de 3 (três) anos. Para isso, as centrais de concreto deverão produzir durante 2.676,63 h/ano. A alternativa que especifica a capacidade da central de concreto que deverá ser utilizada na obra é (caso não encontre valor igual à capacidade disponível no mercado, considere a de valor imediatamente superior): A) 45 m3/h. B) 30 m3/h. C) 130 m3/h. D) 100 m3/h. E) 80 m3/h. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual é a forma correta de se escrever uma laço WHILE em JavaScript? A) while (a < 10) {} B) while a = 1 to 10 C) while (a < 10): D) while (a < 10; a++) {} Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?# cria uma string palavra = "ESTUDAR" letras = ['A', 'B', 'C'] letras[0], letras[2] = palavra[3], palavra[1] print(letras) A) ['T', 'B', 'S'] B) Um erro TypeError: 'tuple' object does not support item assignment C) ['B', 'A', 'C'] D) ['U', 'B', 'S'] E) Um erro TypeError: 'str' object is not callable Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Cálculo da vazão e velocidade de água em um canal retangular Sabe-se que um pequeno canal, com dimensões determinadas conforme a figura abaixo, enche um reservatório de 10.000 m3 em 1 dia. Qual a vazão? Qual a velocidade da água?  A) A vazão é 0.7211 m3/s e a velocidade é 0.1157 m/s. B) A vazão é 0.1157 m3/s e a velocidade é 0.0385 m/s. C) A vazão é 0.0385 m3/s e a velocidade é 0.1157 m/s. D) A vazão é 0.1157 m3/s e a velocidade é 0.0771 m/s. E) A vazão é 0.0771 m3/s e a velocidade é 0.1157 m/s. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação Em relação aos materiais utilizados para formas, assinale a alternativa correta. A) A fibra de vidro é muito utilizada para pilares e vigas. B) Formas em poliestireno expandido são altamente reaproveitadas. C) Vidro é muito utilizado para concreto aparente. D) Tubos de papelão são muito usados em pilares de seção circular e em estruturas com caixão perdido. E) As tábuas são os materiais que proporcionam o maior reaproveitamento. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
