Как вертикально центрировать контент в Stack.Screen, включая заголовок в расчет?

Question

Как расположить содержимое по центру по вертикали в пределах Stack.Screen, включая заголовок в расчете?

В настоящее время, если я попытаюсь расположить вертикально элемент по центру на экране, он будет слегка смещен к нижней части экран из-за заголовка Stack.Screen. Я хотел бы принять этот размер в расчет без использования margin-top: -N, где N - размер заголовка.

Почему без полей? Потому что это добавляет дополнительную сложность обработки устройств iOS и Android.

navigator.component.tsx

<Stack.Navigator>
  <Stack.Screen
    name='SignIn'
    component={SignInComponent}
  />
</Stack.Navigator>

sign-in.component.tsx

const SignInComponent = () => {
  return (
    <View style={{ height: '100%', justifyContent: 'center' }}>
      <Text>Example</Text>
    </View>
  )
}

Answer 1

Почему без наценки? Потому что это добавляет дополнительную сложность обработки устройств iOS и Android.

Какую сложность это добавляет?

import { useHeaderHeight } from '@react-navigation/stack';

// ...

const headerHeight = useHeaderHeight();

<View style={{ height: '100%', justifyContent: 'center', marginTop: -headerHeight }}>
  <Text>Example</Text>
</View>