Заголовки и кнопки

Заголовки и кнопки в React Navigation настраиваются через свойство options, которое можно передать компоненту <Stack.Screen>. Это позволяет гибко управлять внешним видом верхней панели навигации для каждого экрана отдельно.

Настройка заголовка

По умолчанию заголовок экрана совпадает с его name, но его можно изменить:

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{ title: 'Мой профиль' }}
/>

Также можно использовать функцию, если нужно динамически определить заголовок на основе параметров:

options={({ route }) => ({ title: route.params?.userName || 'Профиль' })}

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

Кнопки в правой или левой части заголовка задаются через headerRight и headerLeft. Эти свойства принимают функцию, возвращающую React-элемент:

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{
    headerRight: () => (
      <Button
        onPress={() => alert('Редактировать')}
        title="Edit"
        color="#007AFF"
      />
    ),
  }}
/>

Внутри функции можно использовать замыкание для доступа к пропсам экрана, если options определены как функция:

options={({ navigation, route }) => ({
  headerRight: () => (
    <Button
      onPress={() => navigation.navigate('EditProfile', { userId: route.params?.userId })}
      title="Edit"
    />
  ),
})}

Это позволяет не только отображать кнопки, но и выполнять навигационные действия или другие операции при их нажатии.

Все изменения применяются только к конкретному экрану и не влияют на другие экраны в стеке.