Активная государственная навигация с навигационными реквизитами
Недавно я приступил к работе над своим первым живым проектом, ориентированным на реагирование. Директор проекта поручил нам максимально сократить зависимость от зависимостей. Ранее он рассказывал, как некоторая зависимость нарушала его кодовую базу во время производства. Утверждается, что ему потребовалось несколько месяцев на отладку и удаление зависимостей, чтобы определить виновную зависимость.
Это правило, которое мы передали на собственном опыте, сформировало основные принципы фронтенд-разработки проекта. Таким образом, мы могли использовать только основные зависимости, а затем попытаться обойти другие.
Мне было поручено интегрировать навигацию и активные состояния. Я легко исправил навигацию, но застрял в активном состоянии.
Активное состояние - это заметная «подсветка», которая помогает пользователю приложения определить свою текущую страницу, на которой он находится. В идеале вы можете легко добиться этого с помощью вкладки или обработчика жестов. Но тогда вам необходимо загрузить их зависимости, чтобы иметь возможность использовать их.
Как я работал над реализацией activeState без зависимости
Модуляризация позволила мне создать независимый модуль для навигации по нижнему колонтитулу.
В этом модуле я смог интегрировать активное состояние, используя состояние реакции, условные выражения и стили. Хотя эта процедура противоречила лучшим практикам, поскольку я использовал прослушиватель событий onPress () для переключения между активными состояниями.
В дальнейшем мне нужно было интегрировать модуль нижнего колонтитула с его страницей фокуса, введя модуль нижнего колонтитула в родительский поток. При этом я просто добавил метод навигации к методу onPress, имеющему активное состояние, но, увы, это не дало желаемого результата, так как активное состояние не соответствовало его целевой странице. Это произошло из-за того, что модуль нижнего колонтитула не был статическим, а был индивидуально прикреплен к каждой из страниц в фокусе, поэтому при нажатии и последующей навигации компонент повторно отображает на заданную страницу с новым компонентом навигации нижнего колонтитула и неупорядоченным активным состоянием.
Моя первая мысль об исправлении повлекла за собой передачу реквизитов от сфокусированной страницы вниз к ее компоненту нижнего колонтитула, эти реквизиты должны позволить компоненту сфокусированного нижнего колонтитула принимать / обрабатывать активное состояние, возможно, с использованием условий и стилей, но я не мог найти лучший способ добиться этого.
Возникла еще одна идея: я решил, что у целевой страницы должны быть какие-то полезные свойства или методы. Повторно исследуя это, я наткнулся на объект, ориентированный на isfocused, и на гораздо лучший подход; реквизит навигации.
Использование свойств навигации (this.props.navigation.state.routeName) для обработки активного состояния навигации
Свойства навигации, передаваемые компонентам для включения навигации, имеют состояние this.props.navigation.state.routeName, которое определяет страницу в фокусе. Я использовал это состояние в своем модуле нижнего колонтитула.
Таким образом, я смог добиться идеального состояния activeState в компонентах ящика и нижнего колонтитула, используя условное выражение для назначения стилей выделения намеченным элементам на странице с фокусом.
