如何在反应导航中重置我的堆栈？

Question

我的主屏幕上有5个标签。

• 主页标签
• 搜索标签
• AddPostTab
• 通知标签
• 个人资料标签

AddPostTab就是这样。

const AddPostTab = createStackNavigator({
    AddPost: {
      screen: AddPost,
    },
    ImageDescription: {
      screen: ImageDescription
    },
    },
    {
      headerMode:'none',
      mode:'modal'
    }
);

当我从ImageDescription屏幕返回主屏幕，然后AddPostTab再次进入时，我将直接转到ImageDescription屏幕。但我希望能够转到AddPost屏幕。

我也尝试过

 const resetAction = StackActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'AddPost' }),
                ],
              });
              this.props.navigation.dispatch(resetAction);

但这只将我带到AddPost屏幕。但是，如果我使用Home而不是AddPost，则无法使用。我该如何重设堆栈以进入主屏幕？

Answer 1

这些是完全不同的导航器。并且reset不能应用于TabNavigator，因为这样做没有太大意义。您可以做的是-做这样的事情：

ImageDescription.js：

goToHome() => 
   this.props.navigation.popToTop() 
&& this.props.navigation.navigate('Home');

这将重置为根您当前的堆栈，然后您将切换到Home选项卡

Answer 2

如果您只有一个堆栈，请在单击按钮时使用它

navigation.dispatch(
            CommonActions.reset({
                index: 1,//the stack index
                routes: [
                    { name: 'Promote' },//to go to initial stack screen
                ],
            })
        )

对于单堆栈，您还可以使用

navigation.popToTop()

但如果您在选项卡上工作然后想要重置选项卡，请尝试此操作

 <BottomTab.Screen
    name="Post"
    component={PostStack}
    options={{
      unmountOnBlur: true,// set this props in your tab screen options
      title: 'Post',
      tabBarIcon: focused => <TabBarIcon focused={focused} name="Post" />,
    }}
  />