时间戳

首页 > 解决方案 > 从组件内重置 StackNavigator

react-native - 从组件内重置 StackNavigator

问题描述

广泛的问题（对于寻找相同解决方案的个人）：

我有一个带有基于开关的 StackNavigator（“MainStack”）的应用程序。我想将 MainStack 重置为 {index: 1, routes: [{name: 'Home', name: 'NestedStack'}]}，我想从 MainStack 组件中调用它（见下文）

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {
           anon ?
           <Stack.Screen name="Auth" component={AuthScreen} />
           <Stack.Screen name="MainStack" component={MainStackScreen} />
        }
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const MainStack = createStackNavigator();

function MainStackScreen({navigation, route}) {

  
  *** An event occurs here ***
  *** And I'd like to respond to the event with a navigation.reset() ***

  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={Home} />
      <MainStack.Screen name="NestedStack" component={NestedStackScreen} />
    </MainStack.Navigator>
  );
}

我尝试了几种不同的 navigation.dispatch({...CommonActions.reset({}), target}) 组合，从不存在的屏幕到 screen.options 的问题产生了不同的错误。

我也非常感谢有关如何为 NestedStack 指定从哪个屏幕开始的建议...这只是 {name: 'NestedStack', screen: 'NestedScreen'}??

具体用例： 我真正想要实现的是链接。当应用程序关闭（我通过 Linking.getInitialURL 访问）和应用程序内的相机屏幕（我通过 Linking.addEventListener 收听）时，我有用户打开链接。我已将这两个都放在 MainStack 组件中，以在应用程序从身份验证流切换以及在应用程序内扫描 QR 码时拦截链接。

我必须监听 MainStackScreen 路由的变化，然后在路由完全挂载后将变量 isNavigatorMounted 设置为 true，然后触发我对 Linking.getInitialURL 的检查。

请为一般 StackOverflow 用户解决广泛的问题，但如果这是一种非常低效的方法，请告诉我。

标签： react-nativereact-navigationreact-navigation-stack

解决方案

提供了这个答案https://discord.com/channels/102860784329052160/288388742929055765/770038660220715028

您不需要 CommonActions 或任何东西。只需将以下内容应用于 StackNavigator 的导航对象：

navigation.reset({
    routes: [{ name: 'Home' }, { name: 'NestedStack' }],
});

推荐阅读