Поделиться через

Начало сборки классического приложения с помощью React Native для Desktop

  • Статья

React Native для Desktop позволяет создать приложение универсальная платформа Windows (UWP) с помощью React.

Общие сведения о React Native

React Native — это платформа для разработки мобильных приложений с открытым кодом, созданная Facebook. Она используется для разработки приложений для Android, iOS, Интернета и UWP (Windows). Решение предоставляет собственные элементы управления пользовательского интерфейса и полный доступ к собственной платформе. Для работы с React Native требуется понимание основ JavaScript.

Дополнительные сведения о React см. в статье Общие сведения о React.

Необходимые компоненты

Требования к настройке для использования React Native для Desktop можно найти на странице "Требования к системе". Убедитесь, что в приложении "Параметры" Windows включен режим разработчика.

Установка React Native для desktop

Вы можете создать классическое приложение Windows с помощью React Native для Desktop, выполнив следующие действия.

  1. Откройте окно командной строки (терминал) и перейдите в каталог, в котором нужно создать проект классического приложения Windows.

  2. Эту команду можно выполнить с помощью npx, чтобы создать проект React Native без локальной или глобальной установки дополнительных средств. Команда создаст приложение React Native в каталоге, определяемым <projectName>.

    npx react-native init <projectName>

    Если вы хотите запустить новый проект с определенной версией React Native, можно использовать --version аргумент. Сведения о версиях React Native см. в разделе "Версии React Native".

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

  3. Перейдите в каталог проекта и выполните следующую команду, чтобы установить пакеты React Native для desktop:

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

  4. Чтобы запустить приложение, сначала запустите веб-браузер (например, Microsoft Edge), а затем выполните следующую команду:

    npx react-native run-windows

Отладка классического приложения React Native с помощью Visual Studio

  • Установите Visual Studio 2022 со следующими параметрами:

    • Рабочие нагрузки — разработка приложений универсальной платформы Windows и разработка классических приложений на C++.
    • Отдельные компоненты — действия разработки и поддержка разработки Node.js.

  • Откройте файл решения в папке приложения в Visual Studio (например, AwesomeProject/windows/AwesomeProject.sln, если вы использовали AwesomeProject как <projectName>).

  • Выберите конфигурацию "Отладка" и платформу x64 в поле со списком слева от кнопки "Выполнить" и под пунктом меню "Команда и инструменты".

  • Выполните yarn start из каталога проекта и дождитесь, пока упаковщик React Native проинформирует об успешном выполнении.

  • Выберите Выполнить справа от поля со списком в VS или выберите пункт меню "Отладка"->"Запустить без отладки". Теперь вы должны увидеть новое приложение в Chrome на новой вкладке (http://localhost:8081/debugger-ui/).

  • Нажмите клавишу F12 или клавиши CTRL+SHIFT+I, чтобы открыть средства разработчика в веб-браузере.

Отладка классического приложения React Native с помощью Visual Studio Code

  • Установка Visual Studio Code

  • Откройте папку приложения в VS Code.

  • Установите подключаемый модуль "Средства React Native" для VS Code.

  • Создайте файл в корневом каталоге приложений (.vscode/launch.json) и вставьте следующую конфигурацию:

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

  • Нажмите клавишу F5 или перейдите в меню "Отладка" (также можно нажать клавиши CTRL+SHIFT+D), в раскрывающемся списке "Отладка" выберите "Отладка Windows" и нажмите зеленую стрелку, чтобы запустить приложение.

Дополнительные ресурсы