在 android 上的 tabclick FreshTabbedNavigationContainer 上弹出到 root

Pop to root on tabclick FreshTabbedNavigationContainer on android

考虑一个带有“主页”和“个人资料”按钮的标签栏,当我单击其中一个时,我会在两个页面之间切换,在“主页”页面上,用户可以在导航堆栈中向上导航多次,但仍将焦点放在“主页”选项卡表明这是用户的来源。

现在,在 iOS 上,每当用户从导航堆栈的高处点击“主页”时,用户就会跳转到 root 并且一切正常,但是 android 上情况并非如此, 在 android 上,用户必须通过单击后退按钮一次弹出一页才能到达根目录。

这是预期的行为吗?我做错了什么吗?有人知道我可以做些什么来获得所需的行为吗?

这是 iOS 和 Android 之间的预期行为。

如果你需要让Android和iOS效果一样,你需要自定义TabbedPageRenderer to achieve that. And the bottom tab bar effect can custom a FreshTabbedNavigationContainer . Last, we will use MessagingCenter发送消息到要弹出到根页面的表单。

例如,CustomFreshTabbedNavigationContainer class:

public class CustomFreshTabbedNavigationContainer : FreshTabbedNavigationContainer
{
    public CustomFreshTabbedNavigationContainer()
    {
        On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        MessagingCenter.Subscribe<object>(this, "Hi", (sender) =>
        {
            // Do something whenever the "Hi" message is received
            PopToRoot(true);
        });
    }
}

用于App.xaml.cs:

public App()
{
    InitializeComponent();

    var container = new CustomFreshTabbedNavigationContainer();
    container.AddTab<FirstPageModel>("Home", default);
    container.AddTab<ProfilePageModel>("Profile", default);
    MainPage = container;
}

现在我们将在 Android:

中创建一个 CustomTabbedPageRenderer
public class CustomTabbedPageRenderer : TabbedPageRenderer, BottomNavigationView.IOnNavigationItemSelectedListener
{
    public CustomTabbedPageRenderer(Context context) : base(context)
    {
    }

    int previousItemId = 0;

    bool BottomNavigationView.IOnNavigationItemSelectedListener.OnNavigationItemSelected(IMenuItem item)
    {
        base.OnNavigationItemSelected(item);

        if (item.IsChecked)
        {

            if (previousItemId != item.ItemId)
            {
                previousItemId = item.ItemId;
            }
            else
            {
                Console.WriteLine("ok");
                MessagingCenter.Send<object>(this, "Hi");
            }
        }

        return true;
    }
}

效果:

注意:如果需要和Android中的top Tabbar一样的效果,CustomTabbedPageRenderer中有不同的代码。你可以看看这个discussion.