 |
|
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: 1144 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 965 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 AlertQuantidade de visualizações: 1258 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 |
|
C++ - Como inicializar os valores dos elementos de um vetor C++ usando valores randômicos - Revisado |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
