Чтобы заголовок и тело компонента React Native заняли полную высоту с помощью flexbox, вы можете использовать несколько методов. Вот несколько подходов:

Метод 1: использование гибкости: 1

import React from 'react';
import { View } from 'react-native';
const YourComponent = () => (
  <View style={{ flex: 1 }}>
    <View style={{ height: '50%' }}>{/* Header */}</View>
    <View style={{ flex: 1 }}>{/* Body */}</View>
  </View>
);
export default YourComponent;

Метод 2: применение флексбокса к родительскому контейнеру

import React from 'react';
import { View } from 'react-native';
const YourComponent = () => (
  <View style={{ flex: 1 }}>
    <View style={{ flex: 0.5 }}>{/* Header */}</View>
    <View style={{ flex: 1 }}>{/* Body */}</View>
  </View>
);
export default YourComponent;

Метод 3. Использование комбинации процентов гибкости и высоты

import React from 'react';
import { View } from 'react-native';
const YourComponent = () => (
  <View style={{ flex: 1 }}>
    <View style={{ height: '50%' }}>{/* Header */}</View>
    <View style={{ height: '50%' }}>{/* Body */}</View>
  </View>
);
export default YourComponent;

Метод 4. Использование Dimensions API

import React from 'react';
import { View, Dimensions } from 'react-native';
const YourComponent = () => {
  const windowHeight = Dimensions.get('window').height;
  return (
    <View style={{ flex: 1 }}>
      <View style={{ height: windowHeight * 0.5 }}>{/* Header */}</View>
      <View style={{ height: windowHeight * 0.5 }}>{/* Body */}</View>
    </View>
  );
};
export default YourComponent;

Метод 5. Использование StyleSheet API

import React from 'react';
import { View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: '50%',
  },
  body: {
    flex: 1,
  },
});
const YourComponent = () => (
  <View style={styles.container}>
    <View style={styles.header}>{/* Header */}</View>
    <View style={styles.body}>{/* Body */}</View>
  </View>
);
export default YourComponent;