How to add a Header? to TabNavigator in React-Navigation

uses the React-Navigation navigation in RN, and then there is a tab page that uses TabNavigator in the location top , and now the requirement is that there is still a part of the content on the tab page, so how should this part of the content be displayed?

my idea is to add a header , because the tab navigation is also in StackNavigator , so how to add this header ?

const tab = TabNavigator(
  {
    xx:{screen:xxxx},
    xx:{screen:xxxx}
  },
  {
    ...
  }
);

I try to use navigationOptions to set header in every screen, or in TabNavigator .

then, I set up in the external StackNavigator , although it has an effect, but there is a problem, that is, every time you jump to the page, the header above is displayed first, and the following tab is displayed after it is displayed, and both displays on the iOS are animated around, so you can obviously feel that the whole page has been divided, so is there a solution to this situation? Or is there something wrong with my way of writing?

const tab = createMaterialTopTabNavigator( { xx:{ screen: createStackNavigator({ index: { screen: xxxxx, // header navigationOptions: {}, }, }), // tab navigationOptions: {}, }, xx:{screen:xxxx} }, { ... } );