React-Navigation中怎么样给TabNavigator添加一个Header？

Question

在RN中使用了React-Navigation这个导航，然后有一个tab页面使用了TabNavigator，位置为top,然后现在的需求是这个tab页面上边还有一部分的内容，那么这部分内容该怎么展示？

我的想法是，添加一个header,因为这个tab导航也是在StackNavigator中的，那么这个header,如何添加？

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

我尝试在每一个screen里边，或者TabNavigator里通过navigationOptions设置header都没有效果！

然后，我在外部的StackNavigator中设置，虽然有效果了，但是出现一个问题，就是每次跳转到该页面都是上边的header先显示出来，下边的tab后显示，而且两次显示在iOS上都是有个左右的动画，非常明显的能感觉到整个页面被分割了似的，那么这种情况有没有解决方法？或者说我这种写法有问题？

Answer 1

你的React-Navigation版本最好升级到2.x，然后就是createTabNavigator 已经被官方废弃了。
tabNavigator 和 stackNavigation 是可以相互嵌套的，你要每个tab都有header，就得在tab里加入stackNavigator

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