React Native is an open-source mobile application framework created by Facebook. Você pode usá-lo para desenvolver aplicações para dispositivos Android e iOS com uma única base de código. Facebook Instagram e Facebook, e neste post eu vou mostrar – lhe como criar o seu primeiro aplicativo nativo reate para Android.

exemplo de código nativo React

o código nativo React para um ecrã de aplicações móveis típico parece-se com este:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

If you look closely, you’ll see that React Native uses a combination of JavaScript, HTML-like markup, and CSS. Este excerto de código define um ecrã com um ecrã de texto e estilo.

Reagir Nativo Ambientes de Desenvolvimento: Expo vs. Reagir Nativo CLI

Há duas maneiras para criar um Reagir aplicativo Nativo:

1. Expo CLI
2. Reagir Nativo CLI

eu vou falar sobre os prós e contras de cada um abaixo.

Expo CLI

Expo é um framework de código aberto e uma plataforma para aplicações de reação universal que dá um fluxo de trabalho de desenvolvimento de aplicativos gerenciado. É um conjunto de ferramentas e serviços construídos em torno de plataformas nativas e nativas React que ajudam a desenvolver, construir, implantar e rapidamente iterar em iOS, Android e aplicativos web do mesmo codebase JavaScript ou TypeScript.

Expo retira todas as complexidades associadas com a criação de aplicações nativas React. Algumas das características da Expo CLI incluem:

• APIs universais que fornecem acesso a recursos como câmera, mapas, notificações, sensores, haptics, e muito mais.
• um serviço de compilação baseado em nuvem que lhe dá binários App-store-ready e lida com certificados.
• updates Over-the-air que lhe permitem atualizar o seu aplicativo a qualquer momento sem o aborrecimento e atrasos de submeter-se à loja.

reate Native CLI

The React Native CLI is a more basic and bare-metal development environment. O bom é que ele torna possível construir binários de aplicativos em sua própria máquina, sem depender de um serviço de nuvem. Por outro lado, a configuração é muito mais complicada—para construir aplicativos para o Android, você vai precisar instalar o Android Studio e configurar muitos recursos antes de começar. Este processo pode ser um pouco complexo, mas o ambiente Reat Native CLI é mais adequado para desenvolvedores de aplicativos profissionais.

para este tutorial, vamos usar a Expo uma vez que essa é a maneira mais fácil de começar a construir aplicativos nativos Reat.

Como Expo Obras

Para usar Expo, você primeiro precisa instalar o Expo aplicativo Cliente, que está disponível na Play Store (uma versão também está disponível na App Store do iOS). O aplicativo cliente Expo permitirá que você execute o aplicativo para fins de teste em tempo real.

pode codificar a sua aplicação nativa React no seu próprio computador com o seu editor de texto de programação favorito, e depois usar o CLI Expo para testar ou publicar a sua aplicação. Nos bastidores, a Expo irá embalar o seu código nativo React e torná-lo disponível para o aplicativo cliente Expo no seu dispositivo. Você também pode usar o Expo CLI para publicar o seu aplicativo e torná-lo disponível para qualquer pessoa com o cliente Expo, ou para construir uma versão autônoma do seu aplicativo que pode ser carregado para a app store e executar sem instalar o cliente Expo.

Criando um aplicativo com Expo

neste tutorial, vamos usar o Expo CLI para criar o nosso aplicativo.

pré-requisitos

para criar um aplicativo nativo de reação com Expo, você precisa atender o seguinte:

• nó.js versão 12 LTS ou superior e o Git no seu computador
• um dispositivo Android com o Pirulito (Android 5) ou superior
• a Expo aplicativo cliente instalado no seu dispositivo Android (baixar a Expo cliente para o Android a partir da Play Store)
• conhecimento básico de ReactJS ou JavaScript

além disso, observe que o seu computador e o telemóvel tem de estar ligado à mesma rede sem fio.

nó de Download.js

visite o nó.js website e baixar a versão mais recente do Node. Node está disponível para sistemas operacionais Windows, macOS e Linux. Basta escolher o seu sistema operacional e instalá-lo de acordo com as instruções disponíveis no site.

para verificar se nó.o js está instalado, abre uma janela de terminal e tipo:

node -v

Este comando irá mostrar a versão do nó instalado.

instalar o cliente Expo

Depois de ter instalado o nó, também terá de instalar o cliente Expo CLI. Execute simplesmente o seguinte comando:

 npm install expo-cli --global

para os utilizadores de macOS e Linux, assegure-se que utiliza sudo.

sudo npm install expo-cli --global

Ignore quaisquer avisos ou erros que ocorram no processo de instalação do Expo CLI. Após uma instalação bem sucedida, você deve ver a mensagem abaixo.

Criar uma Lista De App Com a Reagir Nativo

Vamos criar uma simples lista de app que permite que você insira uma lista de tarefas que precisam ser feitas e exibe-os na tela.

crie um novo projecto com a Expo

para iniciar, execute o seguinte comando Expo CLI para criar um novo projecto:

expo init tasklist

tasklist é o nome do projeto. Ser-lhe-á solicitado que escolha um modelo para o seu projecto. Por agora, Escolha o modelo em branco, que lhe dá dependências mínimas.

o comando expo init cria uma pasta do projecto e instala todas as dependências necessárias para a aplicação nativa React.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

navegue para a pasta do projecto e execute o seguinte comando:

cd tasklist-appnpm start

npm start vai começar a Expo dev tools e abra uma nova aba no seu navegador que se parece com isso:

Esta janela permite que você executar o aplicativo em um simulador ou um dispositivo conectado.

conecte um dispositivo

Agora, abra o aplicativo cliente Expo em seu dispositivo Android físico e selecione a opção de Scan QR código, como mostrado abaixo.

em seguida, voltar para a Expo dev janela, escanear o código de barras, e aguarde o JavaScript pacote de processo de compilação completa. Isto costuma demorar alguns minutos. Quando o processo estiver completo, a aplicação deve estar rodando em seu telefone!

estrutura do projecto

Agora que o seu ambiente de desenvolvimento está pronto, poderá editar o código do projecto usando o seu editor de código preferido. A pasta do projecto parece-se com isto:

• ativos: contém as imagens para o aplicativo
• node_modules: contém todas as dependências para o projeto
• App.js: contém o código que torna a UI e é um ficheiro essencial

App.js está aberto na imagem acima. Vamos ver mais de perto. Primeiro, importamos dereact. Nós, em seguida, importar o Text e View componentes de react-native. Nós também importamos Stylesheet, que ajuda com o estilo.

Reagir Nativa vem com built-in de componentes, tais como <Text> e <View> como oposição ao padrão de componentes de HTML, como <div> e <p>. The <View> component is the most fundamental component in React Native and is used for grouping other child components—like in HTML. The <Text> component is used to display text content on the screen—like <p> in HTML.

na versão boilerplate da aplicação.js que a Expo cria, existe uma visão simples com um componente de texto e uma barra de Estado. Esta vista é devolvida da função App(). A constante

contém alguns CSS básicos para estilo da vista.a seguir, vamos adicionar alguns novos componentes e estilos à aplicação!

Crie a aplicação UI

abra a aplicação.js file e digite o seguinte código.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

o código acima adiciona uma entrada de texto simples e um botão para adicionar novas tarefas. Usamos o estilo CSS flexbox para posicionar os componentes ao lado uns dos outros.

Adicionar Manipulação de Eventos

Para obter a entrada do usuário, primeiro importar o useState() função react e usá-lo para atualizar o estado de newTask() e setnewTask() funções. Como o usuário ainda não digitou nada, o estado inicial estará vazio. Adicione o seguinte código para a parte superior de App() função, acima de return:

const = useState('');

Nós, em seguida, defina o taskInputHandler que escuta a alteração na entrada e atualiza o conteúdo de setNewTask() função. Adicione estas linhas ao App() função seguinte:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

Agora vamos registrar esse processador de entrada com o TextInput componente. Actualize o seu componente TextInput para que se pareça com o seguinte.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

Agora precisamos lidar com as prensas de botão. Quando o usuário pressiona o botão+, queremos adicionar a nova tarefa a uma lista.

Primeiro, vamos definir nosso estado para a lista de tarefas:

 const = useState();

em seguida, vamos definir um addTaskHandler função para adicionar a nova tarefa (encontrado no newTask estado) para a lista.

e registar esse manipulador de eventos com o <Button> componente:

 <Button title = "+" onPress = {addTaskHandler} />

finalmente, vamos adicionar uma nova vista para mostrar todas as tarefas na lista que criamos. Isto vai logo após a área do container de entrada, mas ainda dentro da área principal do container.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

código fonte completo para App.js

o código completo da aplicação.js é mostrado abaixo. Compara-o com o que tens.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

conclusão

neste tutorial, você aprendeu a criar um aplicativo nativo de reação com Expo.

Reat Native é um grande framework e uma plataforma popular para desenvolvedores e empresas. Aplicativos criados com Reat Native são garantidos para funcionar sem problemas em qualquer plataforma ou sistema. Reat Native também salva o trabalho de desenvolvimento, permitindo que você codifique o seu aplicativo uma vez e executá-lo em qualquer plataforma móvel.

Premium Mobile App Templates From CodeCanyon

CodeCanyon is an online marketplace that has hundreds of mobile app templates-for Android, iOS, React Native, and Ionic. Você pode salvar dias, até meses, de esforço usando um deles.

Se você está apenas começando com Reat Native, ou se é um desenvolvedor experiente, um modelo App Reat Native é uma ótima maneira de economizar tempo e esforço em seu próximo projeto app.

Se tiver dificuldade em decidir qual modelo de CodeCanyon é adequado para si, estes artigos devem ajudar:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas