Como sabemos, React é uma biblioteca JavaScript gratuita e de código aberto escrita pelo Facebook para criar interfaces de usuário da web altamente dinâmicas. Posteriormente, o Facebook criou o React Native para desenvolver aplicativos móveis nativos de plataforma cruzada usando React como a interface principal para desenvolvedores, o que lhes permitiu construir aplicativos móveis nativos para Android e iOS com uma única base de código baseada na sintaxe React.
O React normalmente renderiza suas alterações de componente para DOM (Document Object Model), mas também pode renderizar componentes como HTML para requisitos de renderização do lado do servidor (SSR). Para React Native, havia o Proton Native , que gerou aplicativos de plataforma cruzada para desktop e permite renderizar nativos Elementos da interface do usuário com os kits de ferramentas da interface do usuário Qt e wxWidgets, mas que não são mais mantidos ativamente.
Embora ainda haja uma bifurcação ativa, neste artigo, abordaremos uma versão mais estável e mantida ativamente. e projeto popular: react-native-windows . Esta é a extensão da Microsoft do React Native para back-ends do Windows e macOS e faz com que o mesmo front-end baseado no React Native seja renderizado nativamente no Windows e no macOS com elementos de interface do usuário específicos da plataforma.
Vou explicar como você pode desenvolver aplicativos de desktop do Windows usando o projeto react-native-windows. Também abordaremos como sua sintaxe React Native se transforma em um aplicativo de desktop nativo com os módulos internos da estrutura.
Configurando o ambiente de desenvolvedor
Certifique-se de que seu computador tenha o seguinte Windows versão instalada:
Windows 10.0.16299.0 (aka, 1709, Redstone 3 ou Fall Creators Update) ou superior
Se o seu computador for aprovado no requisito acima, você pode executar o seguinte comando de forma elevada (como em, com privilégios de administrador) janela do PowerShell para instalar as dependências necessárias.
Set-ExecutionPolicy Unrestricted-Scope Process-Force; iex (New-Object System.Net.WebClient).DownloadString (‘https://raw.githubusercontent.com/microsoft/react-native-windows/master/vnext/Scripts/rnw-dependencies.ps1’)
O O comando acima ativará o modo de desenvolvedor e instalará o Visual Studio, o gerenciador de pacotes Chocolatey e a versão Node.js LTS. Além disso, é ótimo se o seu computador tiver uma memória física de 8 GB ou superior, porque os processos de compilação do Windows normalmente precisam de memória física acima da média para serem executados.
O arquivo de script acima recomenda ter 16 GB de memória física. Você pode continuar com o tutorial se a segunda execução do script acima fornecer uma saída como a abaixo.
Verificando os pré-requisitos para React Native para desenvolvimento do Windows
Criando um aplicativo React Native Windows
Primeiro , crie um novo projeto React Native com o seguinte comando. Este comando irá gerar automaticamente um aplicativo React Native básico.
npx react-native init rnApp–template react-native@^0.64.0
O pacote oficial React Native suporta apenas back-ends Android e iOS, para você será necessário executar o seguinte comando para habilitar o back-end do Windows.
npx react-native-windows-init–overwrite
Agora podemos executar nosso aplicativo React Native recém-criado como um aplicativo verdadeiramente nativo do Windows com o seguinte comando. Este comando irá disparar uma compilação de depuração a partir do código-fonte do projeto atual.
npx react-native run-windows
Além disso, você pode adicionar a opção–useHermes para usar o mecanismo Hermes JavaScript em vez do Chakra padrão.
O primeiro processo de construção pode demorar um pouco para ser concluído, pois compilará muitos arquivos de origem C ++. Se o processo de construção parar com um erro, você pode executar o mesmo comando com a opção–logging para encontrar esses erros.
Você também pode querer tomar nota das seguintes soluções para erros comuns que podem aparecer durante o processo de compilação:
Se o processo de compilação levar muito tempo ou houver erros de compilação relacionados ao Chakra, use a opção–useHermes Se o processo de compilação gerar um erro sobre a falta do SDK do Windows 10, instale-o do Visual Studio Installer Se o processo de compilação falhar com um erro de certificado, siga estas etapas para crie um novo certificado para seu projeto UWP gerado automaticamente com Visual Studio Alguns módulos têm problemas com caminhos que possuem espaços. Certifique-se de que o caminho do seu projeto não contenha nenhum espaço
Assim que o processo de compilação for concluído, você verá uma versão UWP do seu aplicativo React Native, conforme mostrado abaixo.
O auto inicial O aplicativo React Native gerado é executado como um aplicativo UWP
O recurso hot-reload está habilitado. Além disso, o comando run-windows abrirá o React Native Debugger no Chrome. Você pode usar o Chrome DevTools para configurar pontos de interrupção para os arquivos de origem do JavaScript do seu aplicativo.
Agora, vamos aprender o que está acontecendo nos bastidores.
Inside React Native Windows
O núcleo do React Native possui vários componentes básicos do React predefinidos, como View, Text, Image, TextInput e ScrollView. O tempo de execução oficial React Native pode render blocos de construção de IU verdadeiramente nativos para sistemas operacionais Android e iOS. A equipe do React Native inicialmente tornou o módulo de renderização nativa totalmente extensível. Portanto, a comunidade de desenvolvedores foi capaz de estendê-lo para outras plataformas também.
O projeto react-native-windows adicionou suporte a aplicativos Windows. Ele pode gerar um aplicativo do Windows com uma GUI UWP verdadeiramente nativa de seu projeto React Native típico. Os aplicativos UWP funcionam em todas as plataformas populares do Windows, como Windows 10, Windows 10 Mobile, software do sistema Xbox One e Windows Mixed Reality.
No entanto, a parte JavaScript do seu aplicativo é executada em um mecanismo JavaScript semelhante ao projeto React Native original. O projeto react-native-windows inicialmente usou o mecanismo Chakra JavaScript e, mais tarde, eles integraram o mecanismo Hermes JavaScript do Facebook para melhorar o desempenho.
Desenvolvendo um aplicativo simples usando react-native-windows
Faremos um aplicativo UWP simples que mostrará uma mensagem de saudação quando você enviar seu nome e sobrenome. Adicione o seguinte código em seu arquivo App.js.
import React from’react’; importar tipo {Nó} de’react’; import {SafeAreaView, ScrollView, StyleSheet, Text, TextInput, Button, useColorScheme, View, Alert,} de’react-native’; const App: ()=> Node=()=> {const isDarkMode=useColorScheme ()===’dark’; const [firstName, setFirstName]=React.useState (”); const [lastName, setLastName]=React.useState (”); const styles=StyleSheet.create ({dark: {color:’#fff’, backgroundColor:’# 000′,}, light: {color:’# 000′, backgroundColor:’#fff’,}, formItem: {marginBottom: 6,}}); const backgroundStyle={backgroundColor: isDarkMode? styles.dark: styles.light,}; const showFullName=()=> {Alert.alert (`Olá $ {firstName} $ {lastName}`); }; return (
Agora, recarregue o aplicativo atual por meio do React Native Debugger. Você verá um aplicativo como o abaixo, estilizado de acordo com as configurações do seu tema.
Ao clicar no botão OK após preencher as entradas de texto, você receberá uma caixa de mensagem com uma saudação , conforme mostrado abaixo.
Usamos vários componentes principais do React Native e APIs principais neste aplicativo de exemplo, bem como useState Hook para obter as entradas atuais do usuário. Como você pode ver, finalmente obtivemos elementos de IU UWP nativos dos componentes React Native.
Implementações de layout complexo também são compatíveis com a extensão react-native-windows porque ela oferece suporte a Yoga -sintaxe amigável.
A comunidade de desenvolvedores React Native também criou várias bibliotecas notáveis e várias bibliotecas também oferecem suporte a react-native-windows . Em outras palavras, algumas bibliotecas React Native populares funcionarão em aplicativos Android, iOS e Windows.
A distribuição do aplicativo é possível abrindo a fonte do aplicativo UWP com o Visual Studio.
Conclusão
O projeto react-native-windows foi iniciado junto com o estágio inicial de desenvolvimento do projeto oficial React Native. A Microsoft também começou recentemente a trabalhar em react-native-macos para estender React Native para back-ends macOS.
O projeto react-native-windows realmente renderiza elementos de interface do usuário específicos da plataforma a partir de uma base de código baseada em JavaScript. Portanto, se você está procurando uma maneira de criar aplicativos de área de trabalho do Windows de alta qualidade com o React Native, é a melhor solução que existe.
