Взгляд на различные навигаторы для разработки
Если вы изучаете React Native, то вот статья, которую вы не хотите пропустить! Навигаторы используются в каждом приложении React Native для перехода от одного экрана к другому.
В этой публикации будут обсуждаться некоторые из наиболее часто используемых навигаторов, а также ссылки на соответствующие документы для разработчиков и студентов!
Темы в этой статье
- Минимальные требования
- Навигация по вкладкам
- Навигация по ящикам
- Навигация по стеку
- Навигация по верхним вкладкам материала
- Навигация по нижним вкладкам материала
Минимальные требования
react-native>= 0.63.0expo›= 41 (если вы используете Экспо)typescript›= 4.1.0 (если вы используете TypeScript)
Навигатор вкладок
Во-первых, это Навигация по вкладкам, здесь есть нижние вкладки. Разработчики могут добавлять сколько угодно нижних вкладок, но обычно используется от 2 до 5 вкладок в зависимости от сложности приложения.
Навигация по вкладкам идеально подходит для разделения экранов, таких как Домой и Настройки, как показано на изображении выше. Ссылка на документ показывает примеры кода, как начать работу с Навигатором вкладок.
Имейте в виду, что для Навигатора вкладок вы должны импортировать значки или использовать текст в качестве метки. Вы можете использовать значки React или пользовательские значки.
Ящик Навигатор
Навигатор ящиков показывает легкодоступное меню, когда пользователь щелкает значок ящика или вытягивает ящик, как показано ниже.
Drawer Navigator отлично подходит для приложений, которые имеют только 1 экран, и разработчики приложений хотели бы добавить меню быстрого доступа с такими элементами, как «Выход», «Вход в систему», «Настройки», «О программе», «Политика конфиденциальности» и т. д. Это также хорошо для приложений, которые вам нужны. перемещаться одной рукой.
Навигатор стека
Stack Navigator — классическая система навигации в этой статье. Это называется стеком, потому что экраны начинают складываться друг над другом, когда пользователь начинает нажимать кнопку, и это перемещает их на 1 слой глубже.
Как только вы начнете опускаться на уровень в Навигаторе стека, появится кнопка со стрелкой назад, чтобы вернуться к предыдущему стеку. Помимо стрелки назад, вы также можете реализовать слайд, чтобы «скользить назад» к предыдущему экрану.
Навигатор верхних вкладок материалов
Наиболее распространенное использование Material Top Tabs заключается в том, что пользователи могут переходить с одного экрана на другой. Текущий экран обычно окрашен в другой цвет или имеет ползунок, указывающий пользователю, на какой экран он сейчас смотрит.
Навигатор верхних вкладок материалов обычно можно найти в музыкальных приложениях, но нет никаких ограничений на то, где вы можете и где не можете использовать этот навигатор.
Материал Нижние вкладки Навигатор
На самом деле я никогда не использовал этот тип навигации, однако он очень похож на первую навигацию по вкладкам. Материальные нижние вкладки дают разработчику больше контроля над цветами и размерами с помощью навигации.
Если вы хотите сделать индивидуальную навигацию по нижней вкладке, это то, что вам нужно.
Хотите узнать больше об компонентах React Native? Ознакомьтесь со статьей ниже.
Заключительные слова
Поскольку я также изучаю React Native, эти статьи должны помочь людям разобраться в концепциях и помочь в понимании. Я знаю, что документация по программированию может быть немного сложной, поэтому, пожалуйста, поделитесь, сделайте репост, отметьте или отправьте эти ссылки своим друзьям!
Я не собираю электронные письма, так как не люблю спам, поэтому другие программисты могут прочитать эти статьи только в том случае, если ВЫ поможете ими поделиться!
. . .
Если вам понравился этот контент, не забудьте подписаться, аплодировать или комментировать
, потому что это побуждает меня писать больше. Здоровья!
