鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全/ React-Navigation中怎么樣給TabNavigator添加一個(gè)Hea

React-Navigation中怎么樣給TabNavigator添加一個(gè)Header？

在RN中使用了React-Navigation這個(gè)導(dǎo)航，然后有一個(gè)tab頁面使用了TabNavigator，位置為top,然后現(xiàn)在的需求是這個(gè)tab頁面上邊還有一部分的內(nèi)容，那么這部分內(nèi)容該怎么展示？

我的想法是，添加一個(gè)header,因?yàn)檫@個(gè)tab導(dǎo)航也是在StackNavigator中的，那么這個(gè)header,如何添加？

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

我嘗試在每一個(gè)screen里邊，或者TabNavigator里通過navigationOptions設(shè)置header都沒有效果！

然后，我在外部的StackNavigator中設(shè)置，雖然有效果了，但是出現(xiàn)一個(gè)問題，就是每次跳轉(zhuǎn)到該頁面都是上邊的header先顯示出來，下邊的tab后顯示，而且兩次顯示在iOS上都是有個(gè)左右的動(dòng)畫，非常明顯的能感覺到整個(gè)頁面被分割了似的，那么這種情況有沒有解決方法？或者說我這種寫法有問題？

回答
編輯回答
蟲児飛

你的React-Navigation版本最好升級(jí)到2.x，然后就是createTabNavigator 已經(jīng)被官方廢棄了。
tabNavigator 和 stackNavigation 是可以相互嵌套的，你要每個(gè)tab都有header，就得在tab里加入stackNavigator

const tab = createMaterialTopTabNavigator(
  {
    xx:{
       screen: createStackNavigator({
         index: {
           screen: xxxxx,
           // header相關(guān)設(shè)置
           navigationOptions: {},
         },
       }),
       // tab相關(guān)設(shè)置
       navigationOptions: {},
    
    },
    xx:{screen:xxxx}
  },
  {
    ...
  }
);
2018年5月11日 05:25