我有一个带三个标签的TabNavigator。这三个标签中的每一个都是StackNavigators。
如果用户点击两次相同的标签按钮,我该如何导航StackNavigator?
我目前的方法就是做......没什么......
tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
<TabBarBottom {...props} jumpToIndex={index => {
const { state } = navigation,
{ routes } = state;
console.log(routes);
if (state.index === index) {
console.log(index);
const resetTabAction = NavigationActions.navigate({
routeName: 'Dishes',
action: NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Dishes' })],
})
});
// props.navigation.dispatch(resetTabAction);
navigation.dispatch(resetTabAction);
} else {
jumpToIndex(index);
}
}}/>
),
修改
我现在将DishesScreen.router = DishesStack.router;
添加到包装内部StackNavigator的组件中。现在我可以看到路线和状态中的子导航器。但是Screen1(Dish)丢失了。只有一条路线:DishList ...
也许是为了更好地理解我的组件:
应用组件呈现() - &gt; AppNavigator (TabNavigator - 优惠,菜肴,收藏)
菜肴组件呈现() - &gt; DishesStack (StackNavigator - DishList,Dish)
答案 0 :(得分:1)
我错过了将导航道具全部传递给组件..
<AppNavigator navigation={this.props.navigation} ..... />
<DishesStack navigation={this.props.navigation} .... />
如果导航器被一个组件包裹,那么传递路由器也是必要的:
DishesScreen.router = DishesStack.router;
请参阅此部分:Nesting Navigators
答案 1 :(得分:0)
这对我有用
if (state.index === index) {
dispatch(NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Dishes })],
}));
}else{
jumpToIndex(index);
}