React native выбор файла
Обновлено: 03.07.2024
React Native для Windows позволяет создавать приложения универсальной платформы Windows (UWP) с помощью React.
Общие сведения о React Native
React Native — это платформа для разработки мобильных приложений с открытым кодом, созданная Facebook. Она используется для разработки приложений для Android, iOS, Интернета и UWP (Windows). Решение предоставляет собственные элементы управления пользовательского интерфейса и полный доступ к собственной платформе. Для работы с React Native требуется понимание основ JavaScript.
Дополнительные сведения о React см. в статье Общие сведения о React.
Предварительные требования
Требования к установке для использования React Native для Windows см. на странице с описанием требований к системе. Убедитесь, что в приложении "Параметры" Windows включен режим разработчика.
Установить React Native для Windows
Вы можете создать классическое приложение Windows с помощью React Native для Windows. Для этого сделайте следующее:
Откройте окно командной строки (терминал) и перейдите в каталог, в котором нужно создать проект классического приложения Windows.
Эту команду можно выполнить с помощью npx, чтобы создать проект React Native без локальной или глобальной установки дополнительных средств. Команда создаст приложение React Native в каталоге, определяемым <projectName> .
Перейдите в каталог проекта и выполните следующую команду, чтобы установить пакеты React Native для Windows:
Чтобы запустить приложение, сначала запустите веб-браузер (например, Microsoft Edge), а затем выполните следующую команду:
Отладка классического приложения React Native с помощью Visual Studio
- Рабочие нагрузки — разработка приложений универсальной платформы Windows и разработка классических приложений на C++.
- Отдельные компоненты — действия разработки и поддержка разработки Node.js.
Откройте файл решения в папке приложения в Visual Studio (например, AwesomeProject/windows/AwesomeProject.sln, если вы использовали AwesomeProject как <projectName>).
Выберите конфигурацию "Отладка" и платформу x64 в поле со списком слева от кнопки "Выполнить" и под пунктом меню "Команда и инструменты".
Выполните yarn start из каталога проекта и дождитесь, пока упаковщик React Native проинформирует об успешном выполнении.
Нажмите клавишу F12 или клавиши CTRL+SHIFT+I, чтобы открыть средства разработчика в веб-браузере.
Отладка классического приложения React Native с помощью Visual Studio Code
Откройте папку приложения в VS Code.
Создайте файл в корневом каталоге приложений (.vscode/launch.json) и вставьте следующую конфигурацию:
Нажмите клавишу F5 или перейдите в меню "Отладка" (также можно нажать клавиши CTRL+SHIFT+D), в раскрывающемся списке "Отладка" выберите "Отладка Windows" и нажмите зеленую стрелку, чтобы запустить приложение.
Данная статья поможет настроить рабочее окружение React Native на операционной системе Windows 10.
На всех этапах установки пользователь должен иметь права Администратора и подключен к сети Интернет.
Инструкция зависит от Вашей операционной системы и от того, под какую мобильную ОС (Android или iOS) решите разрабатывать приложение. Данная статья ориентирована под ОС разработки Windows, среду разработки Android Studio и мобильную ОС Android.
Установка Chocolatey
Chocolatey — менеджер пакетов в среде Windows по аналогии с apt-get в Linux, позволяющий установить Node, Python2 и др. Устанавливается менеджер пакетов Chocolatey через консольную оболочку PowerShell . Для запуска PowerShell на кнопке Пуск вызываем контекстное меню (нажатием правой клавиши мыши) и выбираем пункт Windows PowerShell (администратор) .
Рядом с меню Пуск кнопка Поиск -> вводим PowerShell и через контекстное меню выбираем Запуск от имени администратора .
Откроется оболочка PowerShell в консольном режиме. Для проверки возможности запуска скриптов от сторонних производителей вводим команду:
По умолчанию использование сторонних скриптов заблокировано (Restricted). Разрешим выполнение сторонних скриптов командой:
Выполнение команды потребует подтверждения, отвечаем символом Y (Yes).
Проверим разблокировку запуска скриптов из консоли предыдущей командой:
При успешном выполнении ответом будет Bypass .
Теперь можно использовать сторонние скрипты. Установим менеджер пакетов Chocolatey следующей командой:
После окончания загрузки Chocolatey можно проверить корректность установки данного пакета. Вводим в PowerShell команду:
На время написание данной статьи версия Chocolatey v0.10.15 .
Установка пакетов Node, Python2, JDK
Приступаем к установке пакетов Node, Python2 и JDK через PowerShell командой:
Install – ключ установки пакетов
-y - ключ (yes) автоматической установки пакетов
nodejs.install, python2, openjdk8 - название устанавливаемых пакетов.
Начнется загрузка и установка пакетов. После установки каждого пакета будет соответствующая надпись о том, что он установлен успешно (successful).
Установка Android Studio
Версия Android Studio на момент написания этой статьи 4.0.1 . Загружаем и устанавливаем Android Studio. Во время установки убедитесь, что выбраны пункты:
- Android SDK
- Android SDK Platform
- Android Virtual Device
Рекомендуем использовать стандартные пути установки.
Для установки требуется порядка 40 Гб свободного пространства диска C: Можно установить пакет на диск D:, но тогда потребуется изменить переменные окружения пользователя.
Затем нажмите кнопку Далее , чтобы установить все эти компоненты.
Установка Android SDK
Android Studio по умолчанию предлагает установить последнюю стабильную версию Android SDK для создания приложения React Native с использованием нативного кода (на момент написания статьи рекомендованная версия Android SDK Platform 29.0.2).
В начальном окне Android Studio открываем справа снизу раздел Configure .
Выбираем пункт SDK Manager .
В подразделе Android SDK на вкладке SDK Platforms в правом нижнем углу установите флажок Show Package Details . Найдите и разверните список Android 10 (Q) , и убедитесь, что отмечены следующие элементы:
- Android SDK Platform 29
- Intel x86 Atom_64 System Image и/или Google APIs Intel x86 Atom System Image
Затем выберите вкладку SDK Tools и также установите флажок рядом с Show Package Details .
Найдите и разверните запись с пунктом Android SDK Build-Tools , убедитесь, что выбрана версия 29.0.2 .
Наконец, нажмите Apply , чтобы загрузить и установить Android SDK и соответствующие инструменты сборки.
Настройка переменных среды
Инструменты React Native требуют настройки некоторых переменных среды для создания приложений с использованием собственного кода. Откройте панель управления Windows .
Нажмите Учетные записи пользователей , затем снова нажмите Учетные записи пользователей .
Нажмите на Изменить мои переменные среды .
Путь до Android SDK можно узнать в пункте настроек SDK Manager .
Проверяем изменение параметров сред в PowerShell командой:
Если пути не обновились необходимо перезагрузить компьютер и проверить заново.
Настройка эмулятора
Для того что бы создать или настроить эмулятор нужно, находясь на главном окне Android Studio , выбрать пункт Configure -> AVD Manager .
Далее нажать кнопку Create Virtual Device. ,
выбираем модель эмулируемого смартфона (Например, Pixel 2) и нажимаем кнопку Next .
В открывшемся окне в столбце Release Name выбрать Q Download (Download является ссылкой на скачивание выбранного образа эмулятора), скачивание и установка начнется автоматически. На момент создания инструкции рекомендуемый API Level 29 , при установке уточните актуальную версию.
Затем нажмите кнопку Next -> Finish . Можно проверить работу эмулятора нажав на зеленую кнопку в форме треугольника, должен появится интерфейс в виде смартфона.
Подключение реального Андроид девайса
Если возникли проблемы с эмулятором, не отчаивайтесь, можно использовать реальный смартфон. Для этого нужно стать разработчиком в своем смартфоне. Для этого переходим в настройки смартфона и выбираем пункт Об устройстве Далее нужно найти пункт Версия. и нажать 5-7 до того пока не появится надпись "Вы стали разработчиком". Подключаем смартфон через USB кабель и в зависимости от прошивки включаем режим отладки по USB. Для каждой прошивки алгоритм включения отличается друг от друга. Подробнее.
Создание проекта React Native
React Native имеет встроенный интерфейс командной строки, который вы можете использовать для создания нового проекта. Вы можете получить к нему доступ командой npx , которое поставляется с Node.js .
Давайте создадим новый проект React Native под названием MyProject .
Для создания проекта на React Native нужно запустить PowerShell от имени администратора, затем в нём с помощью команды cd перейти в папку c Вашим будущим проектом (например: cd D:\MyProjects ). Далее вводим команду:
Запуск React Native
Во-первых, вам нужно запустить Metro Bundler , сборщик JavaScript , который поставляется с React Native . Metro «принимает входной файл и различные параметры и возвращает один файл JavaScript , который включает весь ваш код и его зависимости». - Metro Docs.
Чтобы запустить Metro Bundler , выполните команду в PowerShell npx react-native start в папке c Вашим созданным проектом (например: cd D:\MyProjects\MyReact ) :
Данная команда запустит Metro Bundler и скомпилирует проект.
В дальнейшем первое окно PowerShell c Metro Bundler не закрываем , но можно свернуть его в фоновый режим.
Запуск приложения
Для запуска Вашего проекта React Native открываем второе окно PowerShell и переходим в папку с Вашим проектом выполняя команды:
Запустится Эмулятор или подключаем реальный смартфон с включенным режимом отладки по USB для просмотра результата.
На экране эмулятора или смартфона должен появится экран приветствия React Native .
Редактирование кода в приложении - Hello World
Для редактирования кода открываем папку с проектом любым редактором кода (рекомендуем Visual Studio Code). Редактирование начинаем с файла App.js . При изменении и сохранении кода, Ctrl + S , происходит автоматическое обновление интерфейса нашего приложения на экране эмулятора.
Вставьте в файл App.js следующий код и нажмите Ctrl + S :
На экране со светлым фоном в вверху в центре появиться надпись «Hello World».
Проблемы?
Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.
Сохранение данных всегда было важной частью разработки программного обеспечения. Практически все приложения имеют эту функцию; что такое постоянство данных? —— Говоря прямо, это локализованное хранилище данных, хранить данные локально и вызывать его при необходимости.
Здесь мы вводим два типаReact-Native Наиболее часто используемые методы хранения в
- AsyncStorage: это официальный метод хранения, аналогичный тому, который используется в iOS. NSUserDefault , Разница в том, что, AsyncStorage Можно только хранитьПара "ключ-значение" строки, Пока NSUserDefault Можно хранитьСтрока и число。
- Царство: я только что узнал сегодняRealm Также уже поддерживаетсяReact-Native , Это новый способ хранения мобильных данных, до него он всегда использовалсяsqlist Для хранения данных каждый имеет преимущества в производительности, но в работеRealm Он имеет очевидные преимущества и более удобен в использовании.
Далее мы посмотрим, как их использовать.
AsyncStorage прост в использовании
AsyncStorage методОфициальные документы очень подробные, поэтому я не буду здесь вдаваться в подробности!
AsyncStorage Способ использования очень простой, будем загружать код напрямую:
По официальной рекомендации мы используемAsyncStorage Перед этим лучше всего провести слой инкапсуляции,React-Native китайская сеть Предоставляет нам лучшую основу ——react-native-storage, Мы можем использовать его напрямую, метод очень простой, а документация очень подробная.
Поскольку это сторонний фреймворк, первую часть необходимо импортировать в наш проект:
- Далее мы создаем Storage Файл специально инициализирует фреймворк:
На этом этапе нам нужно обратить внимание на то, где инициализировать этот файл. Фактически, одна идея - где, нам нужно только один раз процитировать файл, а затем мы можем использовать его в других файлах (например, импорт по умолчанию нашей программы index.ios/android.js File, вам нужно только один раз процитировать файл в них, поэтому вам не нужно обращать внимание на последовательность вызовов, потому что index.ios/android.js Файлы однозначно называются первыми, они настоящие короли).
Однако, чтобы облегчить использование того же набора кодов, мы создадим Main Файл как запись программы Терминал передачи Для управления другими файлами, а затем внешнему миру достаточно вызвать это Main Файл, можно вывести все, что внутри. Так будет Цитата Положить Main Файл - лучший выбор.
На этом этапе мы завершили самую базовую настройку, нам нужно использовать ее только там, где она нам нужна, сначала мы создаем новый файл, а затем переходим от основного файла к этому файлу.
Тогда давайте действительно сами воспользуемся этим фреймворком:
- Все очень просто, правда?react-native-storage Давайте сначала поговорим об использовании здесь.
Конфигурация области и общая обработка ошибок
Очень приятно удивлен,Realm Также поддерживаетсяReact-Native , То что мы можем восхитительно Выполняется операция хранения.
И как пользоватьсяRealm Официальные документы так же подробны, как и всегда, поэтому, если вам интересно, вы также можете перейти наДокументация по области Для обучения (я не знаю, проблема ли это в сети или чиновник не разобрался с этим. Я не могу открыть китайскую версию документа, поэтому могу читать только английскую версию). Здесь мы непосредственно отсортируем часто используемый контент и кратко объясним, как использовать.
Прежде всего, вам все равно нужно открыть терминал, чтобыRealm Поместите это в наш проект
Далее добавляемRealm Ссылка на проект
- React-Native >= 0.31.0
- React-Native < 0.31.0
- Вышеупомянутое приглашение указывает на успех, и затем нам нужно удалить установленный в симуляторе APP И переустановите (Xcode выполнит серию конфигураций, среди которых необходимые компоненты будут загружены из сети, время зависит от сетевой ситуации), чтобы проверить, можно ли использовать Android и iOS, 2 терминала
Если там есть err! Если в Android появляется предупреждение об ошибке, это означает, что сторона Android не была успешно настроена, и нам нужно настроить ее вручную. Шаги следующие:
Если появится android Missing Realm constructor - please ensure RealmReact framework is included Ошибка:
Если ссылка по-прежнему не работает, мы проверяем, добавляются ли автоматически следующие коды
React и React Native - это всего лишь фрэймворки, они не диктуют, как структурировать проекты. Все зависит от ваших предпочтений и особенностей проекта. В статье мы рассмотрим, как структурировать проект и как управлять локальными assets.
Для проекта, загруженного с помощью react-native init, мы используем только базовую структуру.
Есть папка ios для проектов Xcode, папка Android для проектов Android и index.js и App.js для отправной точки React Native.
Как человек, который работал с native на Windows Phone, iOS и Android, я обнаружил, что структурирование проекта сводится к разделению файлов по типу (type) или функции (feature)
Группировка по типу
Так мы можем видеть тип каждого файла и легко запускать скрипт к определенному типу файла. Это общее правило для всех проектов, но оно не отвечает на вопрос «о чем проект?» Это новостное приложение? Это приложение для лояльности?
Организация файлов по типу удобна для машины, но не для человека. Мы работаем над фичами не один день, и искать файлы в нескольких каталогах - это лишние хлопоты.
Группировка по функциям
Более разумным решением является организация файлов по функциям. Файлы, объединенные одной функцией, должны быть размещены вместе. И тестовые файлы должны храниться вместе с исходными файлами.
Функция может быть связана с логином, подпиской или профилем пользователя. Функция может содержать вспомогательные, если они принадлежат одному и тому же функционалу. Если бы мы захотели переместить вспомогательную функцию, это было бы легко, так как все связанные файлы уже сгруппированы.
Моя типичная структура проекта, основанная на функциях, выглядит так:
Помимо традиционных файлов App.js и index.js и папок ios и android, я помещаю все исходные файлы в папку src. Внутри src у меня есть res для ресурсов, library для общих файлов, используемых во всех функциях, и screens для экранов.
Как можно меньше зависимостей
React Native основан на множестве зависимостей, я стараюсь быть в курсе всех обновлений. Для навигации я использую react-navigation.
Я не поклонник redux, так как он добавляет ненужную сложность проекту. Добавляйте зависимость только тогда, когда она вам действительно нужна, иначе вы просто создаете себе больше проблем.
Что мне нравится в React - это компоненты. В компоненте мы определяем вид, стиль и поведение. React имеет встроенный стиль - это похоже на использование JavaScript для определения сценария, HTML и CSS. Это соответствует функциональному подходу, к которому мы стремимся. Поэтому я не использую стилизованные компоненты. Стили - это объекты JavaScript, мы можем делиться ими в библиотеке.
Мне очень нравится Android, поэтому я называю src и res в соответствии с соглашениями о папках.
react-native init настраивает babel для нас. Но для типичного проекта JavaScript правильно организовывать файлы в папке src. В моем electron.js приложение IconGenerator, я поместил исходные файлы внутри папки src. Это не только помогает с точки зрения организации, но и помогает babel транспилировать всю папку сразу. Одна команда, и у меня есть файлы в src транспилированные dist в мгновение ока.
React основан на компонентах. Есть контейнер и презентационные компоненты, но мы можем создавать компоненты для создания более сложных компонентов. Это Page в Windows Phone, ViewController в iOS и Activity в Android.
index.js или нет?
Каждый screen считается точкой входа. Вы можете переименовать LoginScreen.js в index.js, используя функцию Node модуля:
Модули не обязательно должны быть файлами. Мы также можем создать папку find-me в разделе node_modules и разместить index.js файл там. Та же строка require('find-me') будет использовать index.js.
Вместо import LoginScreen from './screens/LoginScreen', мы можем просто сделать import LoginScreen from './screens'.
Использование index.js приводит к инкапсуляции и предоставляет публичный интерфейс для этой функции. Я предпочитаю явное имя для файла, следовательно, имя LoginScreen.js.
React-navigation самый популярный выбор для обработки навигации в приложении React Native. Для такой функции, как onboarding, есть много экранов, управляемых навигацией стека, поэтому есть OnboardingNavigator.
Вы можете думать о Navigator как о чем-то, что группирует вспомогательные экраны или функции. Поскольку мы группируем по функциям, разумно разместить Navigator внутри папки с функциями. Обычно это выглядит так:
Самая противоречивая часть при структурировании проекта. Если вам не нравится имя library, вы можете назвать utilities, common, citadel, как угодно.
Здесь мы размещаем общие утилиты и компоненты, которые используются многими функциями.
В React Native нам часто нужно реализовать кнопку с фоновым изображением на многих экранах. Вот простой пример, который остается внутри library/components/ImageButton.js. Папка components предназначена для повторно используемых компонентов, иногда называемых atomic components. В соответствии с соглашениями об именовании React первая буква должна быть прописной.
Если мы хотим разместить кнопку внизу, мы используем функцию utility для предотвращения дублирования кода. Вот так library /utils /moveToBottom.js:
Используйте package.json, чтобы избежать относительного пути
Где-то в src/screens/onboarding/term/Term.js мы можем импортировать данные, используя relative paths:
Это грозит ошибками, так как нужно вычислить, сколько .. мы должны поставить. И если мы перемещаем объект, все пути должны быть переписаны.
Поскольку библиотека предназначена для использования во многих местах, хорошо ссылаться на нее как на абсолютный путь. В JavaScript обычно существует 1000 библиотек для одной задачи. Быстрый поиск в Google показывает тонны библиотек для решения вопроса.
Читайте также: