在使用AppContainer问题的React Native中的所有页面中使用相同的自定义标题

// CustomHeader.js

import React from 'react';
import { Text } from 'react-native';

const CustomHeader = ({ title }) => {
  return (
    <Text>{title}</Text>
  );
};

export default CustomHeader;

// Page1.js

import React from 'react';
import { View } from 'react-native';
import CustomHeader from './CustomHeader';

const Page1 = () => {
  return (
    <View>
      <CustomHeader title="Page 1" />
      {/* 页面内容 */}
    </View>
  );
};

export default Page1;

// Page2.js

import React from 'react';
import { View } from 'react-native';
import CustomHeader from './CustomHeader';

const Page2 = () => {
  return (
    <View>
      <CustomHeader title="Page 2" />
      {/* 页面内容 */}
    </View>
  );
};

export default Page2;

// App.js

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Page1 from './Page1';
import Page2 from './Page2';
import CustomHeader from './CustomHeader';

const AppNavigator = createStackNavigator(
  {
    Page1: {
      screen: Page1,
    },
    Page2: {
      screen: Page2,
    },
  },
  {
    defaultNavigationOptions: {
      header: CustomHeader,
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;