Partilhar via

Comece a criar um aplicativo de desktop com o React Native for Desktop

O React Native for Desktop permite criar um aplicativo da Plataforma Universal do Windows (UWP) usando o React.

Visão geral do React Native

O React Native é um framework de aplicativos móveis de código aberto criado pelo Facebook. Ele é usado para desenvolver aplicativos para Android, iOS, Web e UWP (Windows), fornecendo controles de interface do usuário nativos e acesso total à plataforma nativa. Trabalhar com o React Native requer uma compreensão dos fundamentos do JavaScript.

Para obter mais informações gerais sobre o React, consulte a página de visão geral do React .

Pré-requisitos

Os requisitos de configuração para usar o React Native for Desktop podem ser encontrados na página Requisitos do sistema . Verifique se o Modo de Desenvolvedor está ativado nas Configurações do Windows.

Instalar o React Native para Desktop

Você pode criar um aplicativo da área de trabalho do Windows usando o React Native for Desktop seguindo estas etapas.

  1. Abra uma janela de linha de comando (terminal) e navegue até o diretório onde você deseja criar seu projeto de aplicativo da área de trabalho do Windows.

  2. Você pode usar esse comando com o Node Package Executor (NPX) para criar um projeto React Native sem a necessidade de instalar ferramentas adicionais local ou globalmente. O comando gerará um aplicativo React Native no diretório especificado pelo <projectName>.

    npx react-native init <projectName>

    Se você quiser iniciar um novo projeto com uma versão específica do React Native, poderá usar o argumento --version. Para obter informações sobre versões do React Native, consulte Versions - React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  3. Alterne para o diretório do projeto e execute o seguinte comando para instalar os pacotes do React Native for Desktop:

    cd projectName
npx react-native-windows-init --overwrite

  4. Para executar o aplicativo, primeiro inicie seu navegador da Web (ou seja. Microsoft Edge) e, em seguida, execute o seguinte comando:

    npx react-native run-windows

Depurar a aplicação React Native de desktop usando o Visual Studio

  • Instale o Visual Studio 2022 com as seguintes opções marcadas:

    • Cargas de trabalho: Desenvolvimento da Plataforma Universal Windows & Desenvolvimento Desktop com C++.
    • Componentes Individuais: Atividades de desenvolvimento e apoio ao desenvolvimento de Node.js.

  • Abra o arquivo de solução na pasta do aplicativo no Visual Studio (por exemplo, AwesomeProject/windows/AwesomeProject.sln se você usou AwesomeProject como <projectName>).

  • Selecione a configuração de depuração e a plataforma x64 nos controles da caixa de combinação à esquerda do botão Executar e abaixo do item de menu Equipe e Ferramentas.

  • Execute yarn start a partir do diretório do projeto e aguarde até que o empacotador React Native relate o sucesso.

  • Selecione Executar à direita do controlo da caixa de combinação da plataforma no VS, ou selecione o item de menu Depurar ->Iniciar sem Depurar. Agora vê a sua nova aplicação e o Chrome deve ter carregado http://localhost:8081/debugger-ui/ num novo separador.

  • Selecione a tecla F12 ou Ctrl+Shift+I para abrir as Ferramentas de Desenvolvimento no navegador da Web.

Depurar a sua aplicação de área de trabalho React Native usando o Visual Studio Code

  • Instalar Visual Studio Code

  • Abra a pasta de aplicativos no VS Code.

  • Instale o plug-in React Native Tools para VS Code.

  • Crie um novo arquivo no diretório raiz de aplicativos, .vscode/launch.json e cole a seguinte configuração:

    {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

  • Pressione F5 ou navegue até o menu de depuração (alternativamente, pressione Ctrl+Shift+D) e, no menu suspenso Depurar, selecione "Depurar Windows" e pressione a seta verde para executar o aplicativo.

Recursos adicionais

  • Last updated on