Кнопка навигации

Разработка пользовательского интерфейса для цифровых коллекций

Согласованность

Самое главное при разработке пользовательского интерфейса необходимо обеспечить его согласованность. Графический верхний и нижний колонтитулы должны быть одинаковыми во всей коллекции. Кнопки навигации должны располагаться на всех страницах одинаково. Используйте одинаковые формулировки в этикетках и сообщениях и используйте единообразную цветовую схему для всей коллекции. Отображайте записи метаданных и изображения единообразным образом, чтобы пользователь мог предвидеть, что произойдет при нажатии на ссылку. Применяйте согласованный макет и навигацию. Согласованность в пользовательском интерфейсе позволяет пользователям построить точную мысленную модель того, как он работает, поэтому им не потребуется обучение и поддержка.

Просмотр chapterPurchase book
Читать главу
полностью URL: https://www.sciencedirect.com/science/article/pii/B9781843343967500079


Кнопки заголовка

Версия: 5.x

Теперь, когда мы знаем, как настроить внешний вид наших заголовков, давайте сделаем их разумными! На самом деле, возможно, это амбициозно, давайте просто дадим им возможность очень четко реагировать на наши прикосновения.

Добавление кнопки в заголовок #

Самый распространенный способ для взаимодействия с заголовком нужно нажать кнопку слева или справа от заголовка. Давайте добавим кнопку в правую часть заголовка (одно из самых сложных мест для касания на всем экране, в зависимости от размера пальца и телефона, но также и обычное место для размещения кнопок).

кнопка заголовка

function StackScreen () {
return (
name = «Home»
component = {HomeScreen}
options = {{
headerTitle: props => ,
headerRight: () => (

Когда мы определяем нашу кнопку таким образом, переменная this в options не является экземпляром HomeScreen , поэтому вы не можете вызовите setState или любые методы экземпляра на нем. Это очень важно, потому что очень часто требуется, чтобы кнопки в вашем заголовке взаимодействовали с экраном, которому принадлежит заголовок. Итак, мы посмотрим, как это сделать дальше.

Взаимодействие заголовка с его компонентом экрана #

Чтобы иметь возможность взаимодействовать с компонентом экрана, нам нужно использовать navigation.setOptions для определения нашей кнопки вместо опций options .. Используя navigation.setOptions внутри компонента экрана, мы получаем доступ к свойствам экрана, состоянию, контексту и т. Д.

взаимодействие заголовков

function StackScreen () {
return (
name = «Home»
component = {HomeScreen}
options = {({навигация, маршрут}) => ({
headerTitle: props => ,
} )}
/>
);
}
function HomeScreen ({navigation}) {
const [count, setCount] = React.useState (0);
React.useLayoutEffect (() => {
navigation.setOptions ({
headerRight: () => (
),
});
}, [навигация]);
return Count: {count} ;
}

Настройка Кнопка «назад» #

createStackNavigator предоставляет настройки по умолчанию для конкретной платформы для кнопки «Назад». В iOS это включает метку рядом с кнопкой, которая показывает заголовок предыдущего экрана, когда заголовок помещается в доступное пространство, в противном случае он говорит «Назад».

Вы можете изменить поведение метки с headerBackTitle и headerTruncatedBackTitle (подробнее).

Чтобы настроить изображение кнопки «Назад», вы можете использовать headerBackImage.

Переопределение кнопки «Назад» #

Кнопка «Назад» будет автоматически отображаться в навигаторе стека всякий раз, когда у пользователя есть возможность вернуться с текущего экрана — другими словами , кнопка «Назад» будет отображаться всякий раз, когда в стеке имеется более одного экрана.

Как правило, это именно то, что вам нужно. Но возможно, что в некоторых обстоятельствах вы захотите настроить кнопку «Назад» больше, чем вы можете с помощью параметров, упомянутых выше, и в этом случае вы можете установить для параметра headerLeft элемент React, который будет отображается, как и в случае с headerRight . В качестве альтернативы параметр headerLeft также принимает компонент React, который можно использовать, например, для переопределения поведения onPress кнопки возврата. Подробнее об этом читайте в справке по API.

Если вы хотите сохранить вид кнопки возврата и переопределить только метод onPress , вы можете импортировать HeaderBackButton из @ response-navigation/stack и назначьте этот компонент параметру headerLeft .

Summary #

  • Вы можете установить кнопки в заголовке с помощью свойств headerLeft и headerRight в параметрах .
  • Кнопка «Назад» полностью настраивается с помощью headerLeft , но если вы просто хотите изменить заголовок или изображение, есть другие параметры для этого — headerBackTitle , headerTruncatedBackTitle и headerBackImage .
  • Вы можете используйте обратный вызов для свойства options для доступа к объектам navigation и route .
Оцените статью
clickpad.ru
Добавить комментарий