react-navigation — очень известная библиотека навигации по страницам в React Native, которая может реализовывать различные переходы по страницам — сущность сообщества React Native. С помощью этой библиотеки мы можем добиться эффектов навигации, подобных UINavigationController в iOS, обычных страниц tabBar и эффектов Drawer с боковым скольжением в Android, которые очень удобны и просты в использовании.
В этой статье в основном представлены основные функции react-navigation, а так же проблема и решение, с которым я столкнулся в практическом применении.Я поделюсь этим решением, может кто столкнется с такой же проблемой и может им воспользуется.
Три компонента реактивной навигации
Три компонента, упомянутые здесь, на самом деле являются тремя основными навигационными компонентами реактивной навигации.
StackNavigator—— Компонент навигации по странице, включая панель навигации, может реализовать эффект навигации, аналогичный UINavigationController на стороне iOS. В iOS эффект перехода на страницу — это способ нажатия и выталкивания, а в Android — это способ модального отображения страницы снизу и закрытия ее при возвращении.
TabNavigator——Внизу отображается компонент навигации по страницам tabBar.Этот эффект страницы является наиболее распространенным в приложении.
DrawerNavigator——Реализовать навигационный компонент страницы ящика боковой панели.Этот эффект дизайна страницы также очень часто используется.
В предыдущей статье TabNavigator и StackNavigator просто использовались для реализации демонстрации фильма. Благодаря комбинированному использованию трех вышеупомянутых компонентов Navigator мы можем реализовать навигацию по страницам в большинстве случаев, и в принципе не составляет труда справиться с различными сценариями ежедневной разработки.
функциональная точка реакции-навигации
Использование трех основных компонентов Навигатора можно найти в официальной документации, там есть простые демо-примеры, поэтому я не буду здесь вдаваться в подробности. К тому же официальная документация тоже обновила много чего, что намного богаче, чем когда я просто раньше ей пользовался.С итеративным апгрейдом react-navigation эта библиотека будет становиться все более и более совершенной, давайте посмотрим Что такое галантереи в официальной документации.
iPhone X support
iPhone X и iPhone уже не те, что раньше, больше окантовка вверху экрана, нижняя часть клавиши Home заменена полосой (Home Indicator), для повышения разрешения изменена высота панели навигации и строки состояния . Когда адаптация, необходимая для верхнего заголовка, не закрывается челкой, содержимое нижней панели не закрывается. Также учтена реактивная навигация, добавлены компоненты SafeAreaView UI для решения проблем с адаптацией. Этот официальный документ подробный примерReact navigation.org/docs/ Зима....
При использовании SafeAreaView нужно быть внимательным: это не значит, что вы помещаете все компоненты пользовательского интерфейса в SafeAreaView, а затем функция рендеринга возвращает компонент SafeAreaView. Это зависит от ситуации, вы можете обратиться к реакции-навигацииОфициальная демоверсия.
Установите стиль строки состояния в соответствии с маршрутом
В iOS строка состояния имеет два стиля: по умолчанию и светлый контент.Разные страницы должны отображать разные цвета при переключении страниц.Отображение соответствующего стиля цвета строки состояния сделает пользовательский интерфейс более гармоничным и красивым. Вот как настроить стиль строки состоянияDifferent status bar configuration based on route.
Обработка ключей возврата сущности Android
В Android метод нажатия клавиши возврата объекта часто используется для возврата на предыдущую страницу.Вы можете зафиксировать событие, когда пользователь нажимает клавишу возврата, путем мониторинга и решить, следует ли вернуться на предыдущую страницу немедленно в соответствии с фактическим ситуация.
Получить навигацию по странице в дочернем компоненте
Предположим, что в страницу A встроены страницы B и C, а страница A и страница D управляются StackNavigator. Если вы хотите нажать кнопку на странице B, чтобы перейти на страницу D, страница B должна получить навигацию на странице A для перехода. Поскольку B является подкомпонентом, StackNavigator не контролирует его напрямую и не может переходить без этого свойства навигации. Эта проблема решается с помощью withNavigation в react-navigation.
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';
class MyBackButton extends React.Component {
render() {
return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
}
}
// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);
Deep Linking
Предположим, есть такой сценарий, нажмите ссылку в браузере, чтобы перейти на определенную страницу в вашем собственном приложении, как с этим быть? Официальная документация по реакции-навигации использует StackNavigator в качестве примера, чтобы объяснить, как обрабатывать внешний uri для перехода на указанную страницу.
Отслеживание экрана
Официальный документ объясняет, как использовать сторонний SDK для отслеживания страниц и статистики с Google Analytics. Вот статистика дружбы, статистика чиновника по реагированной собственной имеющей документацию.Статистический документ «Друзья Союза» ReactNative.
Интеграция с Redux
Официальная документация подробно объясняет, как интегрировать Redux и использовать его для управления навигацией по страницам, а также приведена на github.полная демонстрация. Внимательно изучите документацию, чтобы шаг за шагом интегрировать Redux.
Настроить навигатор
Навигатор в дополнение к трем компонентам, интегрированная навигация по страницам управления Redux, упомянутая выше, также может использоваться в реагирующей навигации StackRouter, TabRouter Router для управления пользовательской навигацией по страницам. Этот раздел представляет собой расширенное использование реактивной навигации, вы можете обратитьсяОфициальная демоверсия, и реализовать пользовательскую навигацию по страницам самостоятельно. Здесь я реализовал навигацию, которая отображает панель вкладок слева для управления отображением переключения страниц справа, для стороны панели,Адрес демо здесь. Эффект от работы со стороны пэда следующий:
Получите навигацию за пределами компонентов пользовательского интерфейса и прыгайте равномерно
В процессе использования react-navigation столкнулся с проблемой. Несколько интерфейсов в приложении должны вызывать интерфейс для получения данных. Интерфейс должен передавать параметр токена, а токен получается после входа в систему. Если эта же учетная запись используется на других устройствах, аннулирование токена неизбежно приведет к сбою запроса при вызове интерфейса текущим устройством.Это проблема, вызванная единым входом. Если страница имеет более двух интерфейсов, которые необходимо вызвать, и каждый интерфейс сообщает об ошибке, очевидно, что неразумно выполнять обработку ошибок в каждом месте.
Например, если запрос интерфейса не удался, нам нужно снова войти в систему, Если мы будем писать код перехода для каждой страницы и каждого места ошибки, весь код проекта будет слишком избыточным. Поэтому более разумным выбором является обработка бизнес-логики интерфейса и совершение единого перехода. Однако мы обычно инкапсулируем код интерфейса и не будем писать его в коде UI.Как мы можем получить отображаемый в данный момент интерфейс и навигацию?
В то время я думал о многих решениях этой проблемы.Поскольку понимание и использование реактивной навигации было не очень опытным, какое-то время не было хорошего решения, пока я не нашел этот вопрос и ответ на stackoverflow и не дал интересное решение ., адрес:stackoverflow.com/questions/4….
Создав BaseComponent, получив экземпляр страницы во время инициализации и позволив каждой странице пользовательского интерфейса в маршруте наследовать от этого BaseComponent, вы можете получить текущую отображаемую страницу в любом другом месте и вызвать навигацию по этой странице для перехода. Здесь нет другого фреймворка (например, Redux) для решения этой проблемы. После проверки в реальном проекте подтверждается, что эта схема осуществима. Я также написал простое демо для справки, адрес демо:GitHub.com/Nobody Arron at/Hot….
Суммировать
react-navigation действительно очень полезная навигационная библиотека.После обновления официальной документации она стала более совершенной.Приведено много примеров, что облегчает изучение.В то же время она также рекомендует другие библиотеки, такие какreact-native-router-flux,react-native-navigation,react-router-native, это тоже очень хорошие библиотеки с открытым исходным кодом.
Что касается метода получения навигации за пределами страницы, я считаю, что при постоянном углубленном изучении решений будет больше.Решений мало, потому что мы недостаточно знаем.
PS: Кстати, порекомендуйте средствоExpo, который представляет собой цепочку инструментов, построенную на основе ReactNative, чтобы помочь нам создавать нативные приложения для iOS и Android с использованием JS и React. Некоторые демо-версии в React-Navigation интегрированы в Expo. У Expo есть клиентские приложения для Android и iOS. После загрузки и установки вы можете открыть демо-версию в Expo, отсканировав QR-код, чтобы напрямую увидеть эффект запуска, который очень прост в использовании. . Многие приложения с открытым исходным кодом на Github интегрировали Expo, вы можете напрямую отсканировать код, чтобы просмотреть эффект, и быстро установить его ~