В этой статье будут рассмотрены основы простого реактивного приложения. Я рассказал о том, что такое react-native, и о начальных шагах установки в предыдущей статье, так что это будет более подробный обзор некоторых общих компонентов, используемых в этой библиотеке javascript. Сначала мы рассмотрим макет файла по умолчанию при инициализации с помощью expo, а затем некоторые общие компоненты, которые импортируются непосредственно из react-native. Затем мы рассмотрим несколько удобных вариантов стиля.
Макет файла для React Native с использованием Expo
После того, как вы создали свое приложение для реагирования с помощью expo cli, вы увидите следующую файловую структуру:
Файл App.js в корне каталога проектов в настоящее время является самым верхним слоем вашего приложения, и то, на что по умолчанию реагирует первый взгляд при принятии решения о том, что отображать. Файловая структура, которую вы выбираете для нативного приложения, может сильно различаться в зависимости от личных предпочтений. На самом деле у react-native нет действительно согласованной файловой структуры. В настоящее время я предпочитаю настроить папку приложения на корневом уровне, скопировать код из App.js, создать index.js, куда будет вставлен этот код, и удалить App.js. На этом этапе, если бы я просто сосредоточился на основах, я бы создал следующие папки в этой новой папке приложения:
- Папка assets для хранения моей папки images, в которой хранятся фотографии, которые мне понадобятся.
- Папка components, в которой хранятся пользовательские компоненты, которые можно использовать в разных функциях. Примером может служить кнопка, которая переходит на разные экраны в зависимости от того, какие реквизиты ей переданы.
- Папка config, в которой я бы настроил свою маршрутизацию на разные экраны, которые я сделал с помощью реактивной навигации.
- Папка константы, где я буду хранить значения, которые нужно будет использовать в нескольких областях приложения. Примером может служить файл colors.js, который экспортирует объект с ключами, определяющими различные цвета, которые мне понадобятся.
- Папка screens, в которой я бы определял различные экраны, к которым можно было бы перейти. Некоторыми примерами могут быть Home.js и Profile.js.
каждому из них потребуется, чтобы их относительные пути были импортированы вместе с экспортом по умолчанию для использования в другом месте. Это отличается от простого извлечения элементов из библиотеки React Native по умолчанию или библиотеки React, как показано здесь:
Если мы пойдем по относительному пути в выделенном разделе для colors, мы найдем colors.js. Это файл, который я обычно создаю для хранения различных цветов, которые я буду использовать в своем приложении. Это объект, который может выглядеть следующим образом:
Общие компоненты React Native
Если вы вернетесь к этому предпоследнему изображению во второй строке, вы увидите, что несколько компонентов импортируются из реактивной библиотеки. Есть целая куча еще, но вот некоторые полезные, которые нужно знать:
- Вид — важный содержащий компонент, который обычно является оболочкой для других компонентов. View поддерживает удобные функции макета, такие как flex, flexDirection, alignItems и justifyContent. Он также поддерживает реквизиты доступности для мобильных устройств. Примером компонента View, используемого для центрирования изображения, может быть:
- Text — компонент для отображения текста. который вставляется между открывающим и закрывающим тегом этого компонента. пример:
- Изображение — компонент для рендеринга изображения. Обычно это делается с помощью самозакрывающегося тега с некоторыми дополнительными параметрами, передаваемыми компоненту. Примером отображаемого изображения, которое хранится в проекте, может быть:
И пример изображения, которое вы хотите отобразить, которое нужно получить откуда-то в Интернете, может быть следующим:
Есть еще один очень распространенный компонент, импортированный из нативной библиотеки под названием StyleSheet, о котором мы поговорим в следующем разделе.
Стили в React Native
Большинство компонентов в React Native могут получить реквизит с именем style. Обычно это указывает на объект StyleSheet, который вы определяете как стили под компонентами, которые его используют. Основным примером может быть:
самые верхние атрибуты в этом объекте — это метки, которые вы создаете, и они должны иметь имена, отражающие цель и компонент, в котором они будут использоваться. Лучше всего хранить их в алфавитном порядке, поскольку эти объекты стилей могут стать довольно длинными. Каждая из этих самых верхних меток должна указывать на другой объект с атрибутами, представляющими параметры стиля. На картинке выше стоит упомянуть свойство flex, которое используется для изменения размера.
Несколько полезных вопросов и ответов
На этом этапе у вас могут возникнуть вопросы о некоторых основных функциях, которые должны выполнять все веб-приложения. Я постараюсь сформулировать некоторые из них и дать вам ответы.
- Вопрос: как создавать ссылки в нативном приложении React?
Answer: The Linking component.
Компонент Linking импортируется из react-native и может передавать URL-адрес через функцию openURL. Важно также включить в это функцию .catch() на случай, если URL-адрес не дает ответа 200. Из-за этого лучше всего определить функцию, которая использует импорт связывания и имеет функцию со сценарием перехвата. Что-то вроде:
Пример, относящийся к этому глупому предупреждению, которое я разместил, будет таким:
- Вопрос: как перемещаться между созданными экранами?
Answer: Through the use of React Native Navigation
Подробный ответ на это немного обширен. Если вы будете следовать руководству по приведенной выше ссылке, вы поймете, что это включает в себя настройку структуры вашего приложения специально для этого, что, вероятно, должно быть вашей целью в любом случае. Если вы хотите более подробно ознакомиться с этим процессом, я написал этот блог с конкретными инструкциями, относящимися к этому.
Заключение
Это был обзор основ нативного приложения для реагирования. Надеюсь, прочитав это, вы получили хорошее представление о том, как выглядит простое приложение React и как оно работает. Если вам нравится более глубокое погружение, официальный учебник является отличным ресурсом наряду с реакцией нативных документов. Теперь идите вперед и создавайте свои собственные забавные нативные мобильные приложения!
