用于实现ReactUI.XamForms主细节页面的模式

Posted 2021-04-18

我目前正在使用Xamarin Forms项目，并尝试将ReactiveUI与Master Detail Page导航标准Xamarin Forms项目一起使用。

在阅读了ReactiveUI网站上的文档以及Kent Boogaart的“你，我和ReactiveUI”一书之后，我仍然迷失在如何使用ReactiveUI和Xamarin Forms进行应用程序导航的主细节设置工作中。

我有应用程序正在引导，它加载根视图（主细节页面）：

internal sealed class AppBootstrap: ReactiveObject, IScreen
{
    public AppBootstrap()
    {
        RegisterDependencies();

        this
            .Router
            .NavigateAndReset
            .Execute(GetRootViewModel())
            .Subscribe();
    }

    public RoutingState Router { get; } = new RoutingState();

    public Page GetMainPage() => new RoutedViewHost();

    private void RegisterDependencies()
    {
        Locator.CurrentMutable.RegisterConstant(this, typeof(IScreen));

        /*View Model Registrations*/
        Locator.CurrentMutable.Register(() => new RootView(), typeof(IViewFor<RootViewModel>));
        Locator.CurrentMutable.Register(()=> new MenuView(), typeof(IViewFor<MenuViewModel>));
        Locator.CurrentMutable.Register(()=> new DetailView(), typeof(IViewFor<DetailViewModel>));

        /*Service Registrations*/
    }

    private IRoutableViewModel GetRootViewModel()
    {
        //Add check for login here
        return new RootViewModel(this);
    }
}

然后在我的RootViewModel中：

public sealed class RootViewModel: ViewModelBase
{
    private Page _masterPage;
    private Page _detailPage;

    public RootViewModel(IScreen hostScreen) : base(hostScreen)
    { }

    public Page MasterPage
    {
        get => _masterPage;
        set => this.RaiseAndSetIfChanged(ref _masterPage, value);
    }

    public Page DetailPage
    {
        get => _detailPage;
        set => this.RaiseAndSetIfChanged(ref _detailPage, value);
    }

    public override Action<CompositeDisposable> OnActivated()
    {
        //What do I do?
    }
}

谷歌搜索和搜索堆栈溢出后似乎没有答案在这里和'documentation'不是太有帮助。 ReactiveUI网站上列出的样本以及在线的所有博客帖子都只处理单页导航;这是大多数真实世界的手机应用程序实现的标准抽屉式导航。

任何帮助做什么或链接到实际工作的主细节页面导航将是非常有帮助的，因为我刚试图找到任何实质内容的失败。