How can we set Header for TabNavigator

Question

React-Navigation is used in RN navigation. Then there is a tab page using TabNavigator. The position is top. Now the requirement is that there is still some content on the upper part of the tab page. How can this part be displayed?

My idea is to add a header, because this tab navigation is also in a StackNavigator, then this header, how to add?

Const tab = TabNavigator (
   {
     Xx: {screen:xxxx},
     Xx:{screen:xxxx}
   },
   {
     ...
   }
);

I tried to set the header with navigationOptions in each screen, or in TabNavigator.But it didn't work.

Then, I set it up in an outer StackNavigator. Although there is an effect, there is a problem that every time I jump to this page, the upper header is displayed first, then the lower tab is displayed . There is an left-to-right animation when displayed on iOS, and it is very obvious that the entire page is divided. Is there any solution to this situation? Or is there a problem with my writing?

Kranthi Kranthi · Accepted Answer · 2018-06-06T11:21:43

With this

Const tab = TabNavigator (
   {
     Xx1: {screen: tabScreen1},
     Xx2: {screen: tabScreen2}
   },
   {
     ...
   }
);

Do this also

const tabScreen1 = StackNavigator(
  {
    screen1: { screen: xxxx },
  },
  {
    navigationOptions: {
      gesturesEnabled: false,
    },
  }
);

How can we set Header for TabNavigator

1 Answers