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" />,
    }}
  />

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

2 个答案: