react-native - 如何使用 TabBarTop 和 TabBarBottom 作为自定义导航视图的组件？

Question

我正在使用 react-navigation，我想在标题和选项卡之间放置一个自定义组件，如下所示：

_______________
|  header     |
_______________
|  component  |
|             |
_______________
| tab1 | tab2 | 
_______________       
|             |
|    tab1     |
|             |
|             |
|             |
|             |
_______________

我遵循了 reactnavigation.org https://reactnavigation.org/docs/custom-navigators.html的文档。我创建了一个自定义导航器并从 react-navigation 添加了 TabBarTop。

这是我的代码：

    import...

    const CustomTabRouter = TabRouter(
    {
    Info: { screen: ScreenRestaurantInfo},
    News: { screen: ScreenRestaurantNews},
    Menu: { screen: ScreenRestaurantMenu},
    Gallery: { screen: ScreenRestaurantGallery}
    },
    {
    backBehavior:'none'
    }
    );

    export default class ScreenRestaurant extends React.Component {
      render(){
      const { routes, index } = this.props.navigation.state;
      const Component = CustomTabRouter.getComponentForState(this.props.navigation.state);
        return(
        <ScrollView style={{flex:1}}>
        <Image style={{height:200}} source={header} />
        <TabBarTop {...this.props}/> 
        {/*<TabBarTop navigation={this.props.navigation} />*/}
        <Component navigation={addNavigationHelpers({...this.props.navigation,state: routes[index]})}/>
        </ScrollView>
    )
    }
    }

但是当我运行屏幕时，它会告诉我：

TypeError: undefined is not an object (evaluating 'navigationState.routes')

This error is located at:
    in TabBar (at TabBarTop.js:144)
    in TabBarTop (at ScreenRestaurant.js:320)
    .....

据我了解，TabBarTop 似乎没有将 navigationState 道具从“react-native-tab-view”传递给 TabBar。但在 TabNavigator 中使用时效果很好。

任何想法？谢谢 ！