Question

上下文：构建一个React Native移动应用程序。 UI的底部是四个选项卡。三个包含简单的StackNavigator来保留该选项卡中的导航状态。第四个屏幕本身是一个标签导航器。每个子标签的screen是一个StackNavigator，用于在标签内保留自己的导航历史记录。

概述：

顶级导航器：

BottomTabNavigator
|_Tab 1 (StackNavigator) (initial route)
|_Tab 2 (StackNavigator)
|_Tab 3 (StackNavigator)
|_Tab 4 (Tab4Container)

子导航器：

Tab4Navigator (MaterialTopTabNavigator)
  |_Subtab 1 (StackNavigator) (initial route)
    |_Screen 4.1.1 (initial route)
    |_Screen 4.1.2
  |_Subtab 2 (StackNavigator) (initial route)
    |_Screen 4.2.1 (initial route)
    |_Screen 4.2.2

标签4在标签本身上方具有一些组件，因此被包装在一个容器中。本质上：

class Tab4Container extends React.router {
  render() {
    return(
      <View>
        <Header />
        <Tab4Navigator navigation={this.props.navigation}>
      </View>
    )
  }
}

问题：当用户离开Tab4并返回时，嵌套的标签导航器不会重置其状态。首先，用户单击Tab4，然后单击子选项卡2，然后单击屏幕4.2.2。然后，用户单击选项卡2。然后，用户返回到选项卡4。当前屏幕应为4.1.1，但仍为4.2.2。

Tab4Navigator的结构如下：

const Tab4Navigator = createMaterialTopTabNavigator(
  {
    subTab1: createStackNavigator(
      {
        screen_4_1_1: {
          screen: Screen411Container
        },
        screen_4_1_2: {
          screen: Screen412Container
        },
      },
      { initialRouteName: "screen_4_2_1" }
    ),
    subTab2: createStackNavigator(
      {
        screen_4_2_1: {
          screen: Screen421Container
        },
        screen_4_2_2: {
          screen: Screen422Container
        },
      },
      { initialRouteName: "screen_4_2_1" }
    ),
  },
  { initialRouteName: "subTab1" }
)

问题：重新渲染Tab4Navigator后，如何重置StackNavigator？

Answer 1

您必须在Tab4Navigator上添加tabBarOnPress事件，然后reset堆栈。还要检查此GitHub链接

import { StackActions, NavigationActions } from 'react-navigation';

......

{ initialRouteName: "subTab1", tabBarOnPress: this.handleTabPress }

handleTabPress = ({ navigation }) => {
  navigation.popToTop();
  navigation.navigate(navigation.state.routeName);
}

在渲染器中重置React嵌套导航器

1 个答案: