Java, UX, HTML, CSS, WEB-design

Создание универсальных приложений для Windows с помощью React Native

Краткое описание по статье Создание универсальных приложений для Windows с помощью React Native

Название: Создание универсальных приложений для Windows с помощью React Native . Краткое описание: [ad_1] ⭐ Эрик Ро . Дата публикации: 02.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Эрик Розелл

  • 0 Комментарии

Создание универсальных приложений для Windows с помощью React Native

  • 6 минут чтения

  • Мобильные устройства, Приложения, React Native, Рекламный контент

Краткое резюме ↬

React.js — это популярная библиотека JavaScript для создания многократно используемых компонентов пользовательского интерфейса. React Native использует все замечательные функции React, от односторонней привязки и виртуального DOM до инструментов отладки, и применяет их к разработке мобильных приложений для iOS и Android. С расширением универсальной платформы React Native для Windows теперь вы можете запускать свои приложения React Native на устройствах семейства Universal Windows, включая настольные компьютеры, мобильные устройства и Xbox, а также Windows IoT, Surface Hub и HoloLens.

React.js — это популярная библиотека JavaScript для создания многократно используемых компонентов пользовательского интерфейса. React Native использует все замечательные функции React, от односторонней привязки и виртуального DOM до инструментов отладки, и применяет их к разработке мобильных приложений для iOS и Android.

С расширением универсальной платформы React Native для Windows теперь вы можете запускать свои приложения React Native на устройствах семейства Universal Windows, включая настольные компьютеры, мобильные устройства и Xbox, а также Windows IoT, Surface Hub и HoloLens.

Дальнейшее чтение на SmashingMag:

  • Помимо браузера: от веб-приложений к настольным приложениям
  • Создание гибридных приложений с ChakraCore
  • Предоставление собственного опыта работы с веб-технологиями
  • Рендеринг на стороне сервера с помощью React, Node и Express

В этой статье о коде мы рассмотрим процесс настройки универсального проекта Windows для React Native, импорта основных модулей, специфичных для Windows, в ваши компоненты JavaScript и запуска приложения с помощью Visual Studio.

Еще после прыжка! Продолжить чтение ниже ↓
Создание универсальных Windows-приложений с React-Native

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

Установить расширение платформы React Native Universal Windows очень просто, независимо от того, хотите ли вы добавить платформу Windows к существующему приложению или хотите начать с нуля создание приложения только для Windows.

Добавление React Native для Windows в существующие проекты

Разработчики React Native могут быть знакомы с RNPM, инструментом, изначально созданным для упрощения процесса добавления собственных зависимостей в проекты React Native. RNPM имеет отличную архитектуру плагинов, на основе которой были построены инструменты командной строки React Native для Windows.

Для начала убедитесь, что у вас глобально установлен RNPM.

npm install -g rnpm

После установки RNPM установите подключаемый модуль Windows для RNPM и инициализируйте свой проект.

npm install --save-dev rnpm-plugin-windows
rnpm windows

То windows команда сделает следующее:

  • Установить react-native-windows из НПМ,
  • Прочитайте название вашего проекта с package.json,
  • Используйте Yeoman для создания файлов проекта Windows.

Архитектура плагина RNPM ищет ваш локальный package.json dependencies и devDependencies для модулей, которые соответствуют rnpm-plugin-*следовательно –save-dev выше.

Перейдите на GitHub для получения дополнительной информации о rnpm-plugin-windows.

Создание проекта React Native для Windows с нуля

У вас есть несколько различных вариантов создания проекта React Native Universal Windows с нуля. Если ваше конечное намерение состоит в том, чтобы также создавать приложения для iOS и Android на той же базе кода, рекомендуется сначала использовать существующее руководство для настройки вашего проекта React Native, а затем выполнить шаги, описанные выше. Например,

<code=“language-bash”>npm install -g react-native-cli
react-native init myapp

Примечание: в react-native-windows Пакет NPM совместим только с последними версиями react-nativeначиная с версии 0.27.

В противном случае вы можете легко настроить себя с npm init.

mkdir myapp
cd myapp
npm init
npm install --save-dev rnpm-plugin-windows
rnpm windows

Примечание: поведение по умолчанию для выбора версии react-native-windows заключается в установке последней версии, если package.json еще не имеет react-native зависимость. В противном случае, если react-native зависимость уже существует, плагин попытается установить версию react-native-windows который соответствует основной и дополнительной версии react-native.

Подключаемый модуль Windows для RNPM автоматически установит react-native и react одноранговые зависимости для react-native-windows если они еще не установлены.

Структура проекта React Native для Windows

Существует несколько шаблонных файлов, которые создаются для универсального приложения Windows. К важным относятся:

  • index.windows.js — Это точка входа в ваше приложение React.
  • windows/myapp.sln — Здесь вы должны начать запускать свое приложение и отлаживать нативный код.
  • windows/myapp/MainPage.cs — Здесь вы можете настроить собственные параметры моста, такие как доступные модули и компоненты.

Вот полный вывод:

<code=“language-bash”>├── index.windows.js
├── windows
    ├── myapp.sln
    ├── myapp
        ├── Properties
            ├── AssemblyInfo.cs
            ├── Default.rd.xml
        ├── Assets
            ├── …
        ├── App.xaml
        ├── App.xaml.cs
        ├── MainPage.cs
        ├── project.json
        ├── Package.appxmanifest
        ├── myapp_TemporaryKey.pfx

Мы отправляем основную библиотеку C# для React Native в качестве исходного кода на NPM. Прямой доступ к исходникам поможет при отладке и внесении небольших изменений там, где это необходимо. Пока ядро ​​​​поставляется как исходный код, сторонние модули также должны следовать его примеру (хотя их зависимости могут быть бинарными). Мы будем работать с сообществом React Native над react-native link поддержку, чтобы максимально упростить управление зависимостями. Инструкции по связыванию зависимостей доступны на GitHub.

Создание и расширение приложений для платформы Windows

Основные компоненты и модули для React Native импортируются следующим образом:

import {
  View,
  Text,
  Image
} from ‘react-native’;

В настоящее время то же самое касается модулей для Android и iOS, т.е.:

import {
  TabBarIOS,
  DrawerLayoutAndroid
} from ‘react-native’;

Поскольку Windows является подключаемым модулем к платформе, основные модули, специфичные для Windows, импортируются из react-native-windowsто есть:

import {
  FlipViewWindows,
  SplitViewWindows
} from ‘react-native-windows’;

Итак, типичный раздел импорта компонента React со смесью основных и специфичных для Windows модулей будет выглядеть так:

import React, { Component } from ‘react’;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from ‘react-native’;
import {
  SplitViewWindows
} from ‘react-native-windows’;

На GitHub есть список основных модулей, доступных в React Native для Windows.

Существует несколько способов добавить условное поведение в ваши приложения в зависимости от платформы. Один из способов, который вы, возможно, уже знаете, — это использование *.platform.js шаблон, т. е. index.[android|ios|windows].js. То node-haste График зависимостей выберет имя файла, соответствующее выбранной активной платформе, и вернется к имени файла без какого-либо индикатора платформы, если он доступен. Например, если у вас есть файлы MyComponent.windows.js и MyComponent.js, node-haste выберет MyComponent.js для Android и iOS и MyComponent.windows.js для Windows.

Другой способ — использовать условную логику внутри компонента, как показано в простом компоненте ниже.

import React, {Component} from ‘react’;
import {
  Platform,
  Text,
  View
} from ‘react-native’;

class HelloComponent extends Component { render() { var text = “Hello world!”; if (Platform.OS === ‘android’) { text = “Hello Android!”; } else if (Platform.OS === ‘windows’) { text = “Hello Windows!”; }

<span class="k">return</span> <span class="p">(</span>
  <span class="o">&lt;</span><span class="nx">View</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="nx">Text</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o">&lt;</span><span class="sr">/text</span><span class="err">&gt;

/Вид>
);
}
}

У Facebook есть очень хорошая статья о кросс-платформенном дизайне с помощью React Native на makeitopen.com.

Запуск универсального приложения для Windows

Существует несколько вариантов запуска универсального приложения React Native для Windows. На данный момент самый простой способ — запустить приложение в Visual Studio. После инициализации проекта откройте решение Visual Studio по адресу ./windows/myapp.sln в Visual Studio 2015 (поддерживается версия Community). В Visual Studio выберите платформу, для которой вы хотите выполнить сборку (x86, x64 или ARM), выберите цель, на которую вы хотите выполнить развертывание, и нажмите F5. Мы все еще работаем над развертыванием из командной строки, но работаем над включением run-windows выполняется команда плагину RNPM.

Инструкции по запуску приложений React Native UWP как из Visual Studio, так и из CLI будут развиваться на GitHub. Если у вас возникли проблемы с началом работы с созданием или запуском приложения React для Windows, обратитесь в Discord или создайте вопрос. Мы с нетерпением ждем ваших отзывов и анализируем ваш вклад!

Больше практических занятий с веб-приложениями и мобильными приложениями

Ознакомьтесь с этими полезными ресурсами по созданию веб-приложений и мобильных приложений:

  • Введение в универсальную платформу Windows
  • Как перенести существующий код в Windows с помощью Windows Bridges
  • Курсы и учебные пособия по разработке приложений
  • Курсы и руководства по C#/XAML
  • Службы приложений Azure
  • Мобильные приложения в Visual Studio с Xamarin

Для получения дальнейших обновлений по теме и новых функций, пожалуйста, просмотрите исходную документацию.



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Создание универсальных приложений для Windows с помощью React Native

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»