Как отрендерить компонент в хэдере StackNavigator?

Для отрисовки компонента в хэдере StackNavigator в React Native вам потребуется воспользоваться опцией header в определении экрана.

Первым шагом вы должны создать ваш компонент, который будет отрисовываться в хэдере StackNavigator. Это может быть любой компонент React, который вы хотите видеть в хэдере, например, LogoHeader:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const LogoHeader = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.logo}>My App</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default LogoHeader;

Затем вам нужно использовать этот компонент в определении вашего экрана StackNavigator. Для этого вы должны создать объект конфигурации navigationOptions и указать опцию header равной функции, которая возвращает ваш компонент LogoHeader:

import { createStackNavigator } from 'react-navigation';
import LogoHeader from './LogoHeader';
import HomeScreen from './HomeScreen';

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      header: () => (
        <LogoHeader />
      ),
    },
  }
);

export default AppNavigator;

Теперь ваш компонент LogoHeader будет отрисовываться в хэдере StackNavigator на всех экранах.

Обратите внимание, что в данном примере использована библиотека react-navigation для создания StackNavigator.