Как использовать TabBarTop и TabBarBottom в качестве компонента для пользовательского представления навигации?

Question

Я использую реагирующую навигацию, и я хочу поместить пользовательский компонент между заголовком и вкладками следующим образом:

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

Я следовал за документами по адресу responsenavigation.org https://reactnavigation.org/docs/custom-navigators.html. Я создал пользовательский навигатор и добавил 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 в TabBar из "act-native-tab-view ". Но он хорошо работает, когда он используется в TabNavigator.

Любая идея? Спасибо!