时间戳

首页 > 解决方案 > 在渲染中重置 React 嵌套的导航器

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

问题描述

上下文：构建一个 React Native 移动应用程序。UI 底部有四个选项卡。三个包含 simple StackNavigators 以保留该选项卡内的导航状态。第四个屏幕本身就是一个标签导航器。每个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，然后是 Subtab 2，然后是 Screen 4.2.2。然后用户点击Tab 2。然后用户返回Tab 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？

标签： reactjsreact-nativereact-navigation

解决方案

您必须在 Tab4Navigator 上添加 tabBarOnPress 事件，然后重置stack 。也检查这个GitHub链接

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

......

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

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

推荐阅读