O que é o Reagir nativo?

React Native é uma estrutura de código aberto desenvolvida pelo Facebook que permite aos desenvolvedores criar aplicativos móveis usando JavaScript e React. Ao contrário das abordagens híbridas tradicionais que renderizam visualizações web, React Native compila para componentes de plataforma nativas. Isto significa que a interface da aplicação é construída com visualizações nativas reais (como ] no iOS e ] no Android), resultando em desempenho que corresponde de perto a aplicativos nativos. A estrutura também permite o compartilhamento de código significativo entre iOS e Android – muitas vezes 80-90% – reduzindo drasticamente o tempo de desenvolvimento e os custos de manutenção.

React Native foi lançado pela primeira vez em 2015 e desde então foi adotado por grandes empresas, incluindo Instagram, Shopify e Discord. Sua vibrante comunidade e ecossistema de bibliotecas fazem dela uma escolha prática tanto para startups quanto para empresas.

Começando com Reagir Nativo: Configuração do Ambiente

Antes de escrever qualquer código nativo React, você precisa configurar seu ambiente de desenvolvimento. As etapas exatas diferem dependendo se você segmenta iOS, Android ou ambos, e se você usa o CLI Nativo React ou Expo.

Pré-requisitos

  • [[FLT: 0]]Node.js & npm (ou Fio):[[FLT: 1]] É recomendada a versão 18 ou mais recente. Transferir de [[FLT: 2]]nodejs.org[[[FLT: 3]].
  • Watchman (macOS/Linux): Uma ferramenta de monitoramento de arquivos pelo Facebook que melhora o desempenho. Instale via Homebrew ().
  • Xcode (somente iOS): Necessário para a construção e teste em simuladores iOS. Baixe da Mac App Store. Certifique-se de que você tem as últimas ferramentas de linha de comando Xcode instaladas.
  • Android Studio (apenas Android): Necessário para emuladores e ferramentas Android. Configure um dispositivo virtual Android (AVD) durante a instalação.

Escolher entre Reagir CLI Nativo e Expo

Existem duas maneiras primárias de iniciar um projeto React Native:

  • Reagir CLI Nativo: A abordagem de metais nus. Você tem controle total sobre o código nativo e pode integrar qualquer módulo nativo. Melhor para projetos que exigem recursos nativos personalizados ou otimizações de desempenho.
  • [[FLT: 0]]Expo: Uma estrutura gerenciada construída em cima do React Native. Ela abstrai a maioria das configurações nativas e fornece um conjunto rico de módulos pré-compilados (câmera, notificações push, etc.). Ideal para prototipagem rápida e projetos que não precisam de código nativo personalizado. Leia mais em [[FLT: 2]]expo.dev[[[FLT: 3]].

Para este guia, usaremos o React Native CLI porque ele lhe dá mais flexibilidade. Para criar um novo projeto, execute:

npx @react-native-community/cli init MyApp

Após a inicialização, navegue para a pasta do projeto e execute para iniciar o pacote Metro. Em seguida, abra um segundo terminal e execute ou para iniciar o aplicativo em um emulador ou dispositivo.

Conceitos Principais em Reagir nativo

Mastering React Native requer entender seus blocos de construção principais – muitos dos quais são extensões diretas de React para a web.

Componentes

Tudo no React Native é um componente. A estrutura fornece um conjunto de componentes do núcleo que mapeiam elementos de UI nativos:

  • — Um recipiente que suporta layout com Flexbox, estilo e manipulação de toque. Equivalente a ] na web.
  • — Para exibir texto. Ao contrário do HTML web, você deve embrulhar qualquer texto dentro .
  • — Mostra imagens locais ou remotas.
  • — Um recipiente genérico de rolagem.
  • — Um campo de entrada de texto.
  • — Faz uma visão responder às torneiras com um feedback visual.
  • — Componente de lista de alto desempenho para grandes conjuntos de dados.

Você também pode compor componentes personalizados combinando estes primitivos. Para uma lista completa, verifique a documentação oficial de Reagir Nativo.

Estado e Props

Estes são os mesmos conceitos que no React para a web:

  • Props: A abreviatura de propriedades. São valores apenas de leitura passados de um componente pai para um componente filho. Eles configuram o comportamento ou aparência da criança.
  • Estado: Dados mutáveis geridos dentro de um componente. Quando o estado muda, o componente re-render. Use gancho (componentes funcionais) ou (componentes de classe).

Exemplo:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

A navegação não está incorporada no núcleo React Native. A solução mais popular é [[FLT: 0]]React Navigation. Ela fornece um navegador de pilha (como uma pilha de navegação), um navegador de aba e um navegador de gaveta. Instale- o com:

npm install @react-navigation/native @react-navigation/stack

Após a instalação, embrulhe seu aplicativo com e defina suas telas:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Estilingue

Reagir Nativo usa objetos JavaScript para styling em vez de CSS. Você define estilos usando ou objetos inline. O motor de layout é Flexbox por padrão, com propriedades como , , . Não há consultas de mídia CSS; o design responsivo é alcançado através da API ou bibliotecas como ].

Construindo sua primeira aplicação de plataforma cruzada: Um exemplo passo a passo

Vamos construir um aplicativo meteorológico simples que obtenha dados de uma API pública e os mostre em ambas as plataformas. Isso demonstrará o gerenciamento de estado, solicitações de rede e composição de componentes.

Passo 1: Configuração do Projeto

Criar um novo projeto usando o React Native CLI:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Passo 2: Instalar dependências

Precisamos de alguns pacotes:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Para a chamada API, usaremos a API incorporada . Opcionalmente instalaremos para ícones.

Passo 3: Construir a Tela Inicial

Criar [[FLT: 32]]:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Passo 4: Ativar a navegação

Em , importar o navegador e o ecrã:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Passo 5: Execute o aplicativo

Iniciar o empacotador de Metro (, em seguida, execute no Android (]) ou iOS (). Você deve ver uma entrada de texto, um botão e dados meteorológicos após uma chamada API bem sucedida.

Este app básico funciona em ambas as plataformas com código JavaScript idêntico. Esse é o poder do React Native.

Vantagens de usar o Reagir Nativo

  • Reusabilidade de Código: Compartilhe lógica de negócios, gerenciamento de estado e componentes de UI em plataformas. Você pode até mesmo reutilizar código com um aplicativo web usando React Native for Web.
  • Performance: Desempenho quase-nativo porque a interface é renderizada usando componentes nativos, não visualizações web. O tópico JavaScript é executado assíncrona, e cálculos pesados podem ser descarregados para módulos nativos.
  • [[ FLT: 0]] Ecossistema de Comunidade Grande & amp;: [[ FLT: 1]] Milhares de bibliotecas, uma comunidade vibrante no GitHub e ferramentas extensas. Os problemas são bem documentados, e os plug- ins existem para quase todas as necessidades.
  • Desenvolvimento Rápido com Recarregar Quente: O empacotador Metro suporta Substituição de Módulos Quentes (HMR). Você pode editar o código e ver as alterações instantaneamente sem reconstruir todo o aplicativo.
  • Atualizações de ar livre: Com serviços como Microsoft App Center ou CodePush, você pode pressionar JavaScript e atualizações de ativos diretamente para usuários sem aprovação de loja de aplicativos.
  • Cost-Effective:] Uma equipe pode manter uma única base de código em vez de duas equipes nativas separadas. Isso reduz os custos de desenvolvimento e manutenção.

Desafios e Limitações

Apesar dos seus pontos fortes, o React Native não é uma bala de prata.

  • Módulos nativos: Quando você precisa acessar recursos do dispositivo não cobertos pelo núcleo ou bibliotecas comunitárias (por exemplo, Bluetooth avançado, filtros de câmera personalizados), você deve escrever código específico de plataforma em Java/Kotlin (Android) ou Objective-C/Swift (iOS). Isso requer experiência de desenvolvimento nativo.
  • Performance Bottlenecks:] Reagir Nativo depende de uma ponte entre o JavaScript e threads nativos. Animações muito complexas, gráficos em tempo real (como jogos 3D), ou processamento de dados pesados podem causar o jank. Para a maioria dos aplicativos de negócios, o desempenho é adequado, mas para jogos ou aplicativos intensivos consideram Flutter ou nativo completo.
  • Depuração Complexidade: Embora as ferramentas de depuração tenham melhorado, a solução de problemas de bugs específicos de plataforma pode ser complicada. Problemas podem ocorrer apenas em certos dispositivos Android ou versões iOS. A comunidade nativa Reagir e ferramentas como ajuda Flipper, mas a experiência de depuração não é tão perfeita quanto o desenvolvimento nativo.
  • Consistência UI: Porque cada plataforma renderiza componentes de forma diferente (por exemplo, ] tem aparências diferentes no iOS e Android), você pode precisar escrever estilos ou componentes específicos de plataforma. A API ajuda a detectar o sistema operacional, mas manter um design verdadeiramente perfeito em pixels em ambas as plataformas pode ser demorado.
  • Tamanho da aplicação:] Os apps nativos de reação tendem a ser maiores do que os aplicativos nativos devido à inclusão do motor JavaScript (Hermes ou JavaScriptCore). O tamanho médio é de 10-20 MB mais do que um equivalente nativo.

Tópicos avançados: Quando você precisa de mais

Interagindo com os Módulos Nativos

Para preencher o hiato quando uma biblioteca JavaScript não existe, você pode escrever um módulo nativo. Por exemplo, para usar um sensor de hardware não suportado por um pacote comunitário:

  • No Android: Crie uma classe Java que se estenda e registre-a com o pacote.
  • No iOS: Criar uma classe Swift/ObjC que implemente o protocolo .
  • Em seguida, chame-o de JavaScript:

Estratégias de otimização de desempenho

  • Use Hermes:] Hermes é um motor JavaScript otimizado para dispositivos móveis. Habilite-o em seu e . Reduz o tempo de inicialização e o uso da memória.
  • [[FLT: 0]] FlatList vs ScrollView: Use [[FLT: 46]] ou [[FLT: 47]] para listas longas. Eles reciclam visualizações e evitam renderizar itens fora da tela.
  • Memoização:Usar e ]para evitar re-renderes desnecessários.
  • InteractionManager: Derrotar cálculos pesados até que as animações ou transições sejam concluídas.
  • [[FLT: 0]] Driver Nativo para Animações: Use [[FLT: 50]] ao animar propriedades não- layout (opacidade, transformar). Isto descarrega animações para o tópico nativo.
  • Cacheamento de imagens: Substituir o componente padrão por (de )] para melhor gestão de memória e cache.

Testando sua aplicação

Reagir Nativo suporta várias estratégias de teste:

  • Unit testing: Use Jest (pré-configurado) para testar funções e lógica puras.
  • Experimentação de componentes: Use a Biblioteca de Testes Nativos de Reagir para renderizar componentes e testar interações do usuário.
  • End-to-End Testing: Detox by Wix é uma popular plataforma de teste E2E de caixa cinza que é executada em dispositivos e simuladores reais. Ele simula ações do usuário e verifica o estado de UI.

Implantação para as lojas de aplicativos

Antes de implantar, certifique-se de ter uma construção pronta para a produção:

  • Configure ícones de aplicativos e telas de apresentação para ambas as plataformas.
  • Defina a versão do aplicativo e o número de compilação em e arquivos de configuração nativos.
  • Para Android: Gere um APK ou AAB assinado usando a chaveria Android Studio. Em seguida, faça o upload para o Google Play Console.
  • Para iOS: Arquive a aplicação no Xcode (Product > Archive), assine com um certificado de distribuição e carregue através do Xcode ou do Transportador para a App Store Connect.
  • Considere usar serviços de integração contínua como o GitHub Actions ou Bitrise para automatizar a construção e assinatura.

Exemplos de aplicações nativas de React

  • Instagram (Explore Tab / Threads): O Instagram usa React Native para partes de seu aplicativo, incluindo a aba Explorar e a aplicação Threads autônomas. Eles alcançaram o compartilhamento de código entre plataformas mantendo uma sensação nativa.
  • Discord (Mobile):] O aplicativo móvel da Discord é construído com o React Native. Eles aproveitaram o motor Hermes para o desempenho e compartilhamento de código entre Android e iOS.
  • Walmart: O gigante do varejo reconstruiu seu aplicativo móvel usando React Native, alcançando experiências quase idênticas em ambas as plataformas e reduzindo o tempo de desenvolvimento.
  • Uber Eats (Restaurant Dashboard): Uber Eats usa React Native para seu painel voltado para o restaurante, permitindo iteração rápida e implantação de plataformas cruzadas.

Conclusão

Reagir Nativo continua sendo uma das opções mais importantes para o desenvolvimento de dispositivos móveis multiplataforma devido ao seu equilíbrio entre desempenho, experiência de desenvolvedor e reutilizabilidade de código. Embora tenha limitações – especialmente em torno de aplicativos com uso intensivo de gráficos e complexidade de módulos nativos – ele se destaca para a maioria dos aplicativos móveis padrão, do comércio eletrônico às mídias sociais às ferramentas empresariais.

Ao dominar os conceitos principais (componentes, estado, navegação, estilo), alavancando o ecossistema de bibliotecas extenso, e seguindo as melhores práticas para desempenho e testes, você pode entregar aplicativos de alta qualidade para usuários iOS e Android com uma única base de código. Use o oficial Reagir documentação nativa como sua referência primária, e explorar recursos comunitários como Reagir diretório nativo[]] para bibliotecas. Comece a construir hoje – seu primeiro aplicativo multiplataforma está apenas ] de distância.