我正在使用react-navigation，我想在 Headers 和标签之间放置一个自定义组件，如下所示：
_______________
| 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没有从'react-native-tab-view'将navigationState props传递给TabBar . 但它在TabNavigator中使用时效果很好 .
任何的想法？谢谢 ！