如何初始化 Stack navigator？

Question

我在每个选项卡上都有一个 Bottom Tabs Navigator that contains a Stack Navigator。

const MainNavigator = createBottomTabNavigator<MainRoutes>();

export interface MainNavProps {
  user: User,
  signOut: SignOut
}

export function MainNav({ user, signOut }: MainNavProps) {

  return (
    <MainNavigator.Navigator initialRouteName="DashboardSection" screenOptions={mainScreenOptions}>
      <MainNavigator.Screen name="DashboardSection" component={DashboardStack} options={dashboardOptions} />
      <MainNavigator.Screen name="HashSection" component={HashStack} options={hashesOptions} />
      <MainNavigator.Screen name="AccountSection" component={AccountStack} options={accountOptions} />
    </MainNavigator.Navigator>
  )
}

我想在这里强调 HashStack 导航器。它由两个屏幕组成，即：

const HashNavigator = createStackNavigator<HashRoutes>();

const screenOptions = ({ navigation, route }: HashStackProps): StackNavigationOptions => {

    const pressHandler = () => navigation.navigate("Modify", { title: "modify hashes" });

    return {
        ...sectionScreenOptions,
        headerRight: function HeaderLeft() {
            return (
                route.name === "Index" ?
                    <Button
                        marginR-10
                        iconSource={() => (
                            <MaterialCommunityIcons name="plus" color={Colors.primaryDarker} size={28} />
                        )}
                        style={{ width: 35, height: 35 }}
                        color={Colors.primaryDarker}
                        outline
                        outlineColor={Colors.primaryDarker}
                        onPress={pressHandler}
                    /> : <></>
            );
        },
        headerTitle: route.params.title
    }
}

export function HashStack() {
   
    return (
        <HashNavigator.Navigator initialRouteName="Index" screenOptions={screenOptions} >
            <HashNavigator.Screen name="Index" component={Hash} initialParams={{ title: "hashes overview" }} />
            <HashNavigator.Screen name="Modify" component={ModifyHash} />
        </HashNavigator.Navigator>
    );
}

为了简化说明我录了个视频：

https://user-images.githubusercontent.com/56756949/137601978-9d3aec89-3732-42a4-834b-b427bc1f73ca.mp4

当我按下屏幕中间的选项卡 Hashtag 时，它会显示 HashStack 组件。
如您所见，HashStack ScreenOptions 上的 headerRight 属性处于活动状态，并显示 plus 按钮。单击 plus 按钮，它会导航到 HashStack 内的 Modify 路线。然后按选项卡 Dashboard，这是 Bottom Tabs Navigator 中的第一个 Route，然后再次按 Hashtag 选项卡，它不会显示初始路线屏幕，即：

<HashNavigator.Screen name="Index" component={Hash} initialParams={{ title: "hashes overview" }} />

问题是，如何在按下另一个 Bottom Tab 时重置 HashNavigator，以便 Hashtag 选项卡始终显示初始路线 Index。

Answer 1

您可以在 HashStack

的选项卡屏幕选项中传递 unmountOnBlur: true

const hashesOptions = {
  // other options
  unmountOnBlur: true
}
export function MainNav({ user, signOut }: MainNavProps) {

  return (
    <MainNavigator.Navigator initialRouteName="DashboardSection" screenOptions={mainScreenOptions}>
      <MainNavigator.Screen name="DashboardSection" component={DashboardStack} options={dashboardOptions} />
      <MainNavigator.Screen name="HashSection" component={HashStack} options={hashesOptions} />
      <MainNavigator.Screen name="AccountSection" component={AccountStack} options={accountOptions} />
    </MainNavigator.Navigator>
  )
}

如何初始化 Stack navigator？

How to initialize Stack navigator?

react-native

react-navigation