你可以做一个Custom header，你必须在每个屏幕上调用它。
通常我们有三个主要组成部分头Container，context & functionality .
(context = title & icons on both sides)个
所以，Header组件是这样的，

const MyHeader = ({
  title,
  iconRight,
  iconLeft,
  onpressRight,
  onpressLeft,
}) => {
  return (
    <View style={styles.container}>
      <Icons
        size={20}
        name={iconLeft}
        onPress={onpressLeft}
        style={styles.iconStyle}
      />
      <Text style={styles.title}>{title}</Text>
      <Icons
        size={20}
        name={iconRight}
        onPress={onpressRight}
        style={styles.iconStyle}
      />
    </View>
  );
};

字符串
这是主要的结构，现在你必须处理一些情况，比如，当图标丢失时，文本仍然应该居中，以及其他根据你的需要。
这是Expo Snack的完整组件和用法。我将作出必要的变化，但主要概念将是相同的。

您可以创建可以在整个应用程序中使用的标题组件。样式和其他事件可以在此标题中处理。还要确保在导航器中将headerShown设置为false，以便隐藏默认的react导航标题

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

const Header = ({title, navigation, bgColor}) => {
  return (
    <View style={{height: 40, backgroundColor: bgColor}}>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={{ color: 'white'}}>Back</Text>
      </TouchableOpacity>
      <Text style={{flex: 1, color: 'white', textAlign: 'center', padding: 10}}>
        {title}
      </Text>
    </View>
  );
};

export default Header;

字符串