如何在模糊时重置堆栈导航器？（反应原生，反应导航）答案

【问题标题】：How to reset a Stack Navigator on blur? (React Native, React Navigation)如何在模糊时重置堆栈导航器？（反应原生，反应导航）
【发布时间】：2020-07-10 11:12:05
【问题描述】：

所以我有以下导航结构：

NavigationContainer
--Tab.Navigator
----Tab.Screen (Home)
------Stack.Navigator
--------Stack.Screen (Overview)
--------Stack.Screen (Goals)
--------Stack.Screen (Economy)
----Tab.Screen (Stats)
------Stack.Navigator
--------Stack.Screen (Overview)
--------Stack.Screen (Economy Page)
--------Stack.Screen (Consumption Page)
----Tab.Screen (Challenges)
----Tab.Screen (Data)

现在问题是我希望所有堆栈导航器都重置为更改选项卡时的默认概览页面。这意味着，例如，如果您在主屏幕概览中，输入目标堆栈屏幕，将选项卡更改为统计信息，然后返回主选项卡，您将返回概览，但现在它仍会在目标屏幕上。

我曾尝试使用来自反应导航的 CommonActions 方法，如下所示：

navigation.addListener('blur', () => {
    console.log('Home screen changed');
    navigation.dispatch(
        CommonActions.reset({
          index: 1,
          routes: [
            { name: HomeScreens.Start },
          ],
        }),
    );
  });

但问题是导航元素引用了父导航器。这意味着如果您在每个 Stack Navigator 中也会发生重置，这是我不想要的。

现在我的主屏幕是这样的：

export function HomeScreen({ navigation }:any) {
  return (
    <NavigationContainer independent = {true} >
      <Stack.Navigator initialRouteName={HomeScreens.Start} headerMode = "none">
        <Stack.Screen name = {HomeScreens.Start} component={StartPage} />
        <Stack.Screen name= {HomeScreens.Economy} component={EconomyPage} />
        <Stack.Screen name= {HomeScreens.Goal} component={GoalPageFunc} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

是否可以在更改选项卡时在此处执行某些操作以重置堆栈导航器，但在堆栈导航器中导航时则不能？

【问题讨论】：

标签： javascript node.js react-native react-navigation

【解决方案1】：

您可以尝试issue on github 中发布的此解决方案：

添加blur 侦听器并在您要重置的Tab.Screen 上设置unmountOnBlur: true。在您的示例中，它将是 Tab.Screen (Home)

    <Tab.Navigator>
      <Tab.Screen name="FirstScreen" component={FirstScreen} />
      <Tab.Screen
        name="SecondScreen"
        component={SecondScreenStack}
        options={{unmountOnBlur: true}}
        listeners={({navigation}) => ({blur: () => navigation.setParams({screen: undefined})})}
      />
      <Tab.Screen name="ThirdScreen" component={ThirdScreen} />
    </Tab.Navigator>

【讨论】：