nativescript-pull-reveal

Android

iOS

|

(iOS 上有bug)

由于原因尚不完全清楚，iOS 版本显示奇异的和不一致的行为。这些问题包括

• 抽屉位置可能开始时在屏幕之外，使其无法访问
• 抽屉内容渲染不正确或不完整。
• 这种状态不仅在不同设备/屏幕尺寸之间变化，而且与源内容的大小不同。

Pull Reveal 组件在所有测试的 Android 布局尺寸上运行良好。这里发现的唯一注意事项是，非常小的显示屏可能不足以容纳整个抽屉内容，因此在这些小型设备上，这部分内容将无法访问。

功能

• 面板可以从底部、顶部、左侧、右侧、左上角、右上角、左下角或右下角滑动到内容上方。
• XML 和代码声明
• 可以编程打开和关闭
• Android 和 iOS（虽然，如上所述，目前在 iOS 上有bug）

安装

要开始，按照正常方法安装插件

tns plugin add nativescript-pull-reveal

使用

尽管可以通过代码单独添加 Pull Reveal 抽屉，但更常见的方法是在 XML 中声明它，并从页面代码中与其通信，就像大多数其他 Nativescript 组件一样。

XML

要设置 Pull Reveal 组件，必须声明两个组件。对于您希望包含 PullReveal 组件的页面，您必须首先在页面声明中导入控制器的命名空间，如下所示

<Page
        navigatingTo="onNavigatingTo"
        xmlns="http://schemas.nativescript.org/tns.xsd"
        xmlns:pr="nativescript-pull-reveal"
>

这设置了前缀 pr 作为 Pull Reveal 插件模块的引用。您可以使用任何合法的命名空间变量名，但 pr 在这些示例中用于整个示例。

在 Pull Reveal 模块中，您需要设置两个组件以将 Pull Reveal 组件放置到页面中。

首先，您必须声明一个包围容器作为 PullRevealContext。这是通过在页面顶部放置 <pr:PullRequestContext> 标签并包围页面布局来完成的。

例如，假设您的非拉抽增强型页面如下所示

    <StackLayout> 
        <Image src="~/images/happyface.png"/>
        <Label text="Here is some content"/>
    </StackLayout>

那么您想要如下包装

    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src="~/images/happyface.png"/>
            <Label text="Here is some content"/>
        </StackLayout>
    </pr:PullRevealContext>

最后，我们需要创建 Pull Reveal 抽屉本身并填充其内容

    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src="~/images/happyface.png"/>
            <Label text="Here is some content"/>
        </StackLayout>

        <pr:PullRevealDrawer id="pullDrawer" anchor="bottom" backgroundColor="black" color="whitesmoke" >
            <Label text="Item 1"/>
            <Label text="Item 2"/>
            <Label text="Item 3"/>
        </pr:PullRevealDrawer>
    </pr:PullRevealContext>

您应该能够将所有类型的内容放入拉抽屉中，并且确实，Pull Reveal 是拉出设置和配置需求的好工具。

Pull Reveal 接受以下属性

• anchor 是 'bottom' 或 'top' 之一（如果未定义，则默认为 'bottom'）并确定拉抽是否从顶部向下拉或从底部向上拉。

• exposed 定义了在抽屉关闭时应该揭示到上下文中的抽屉的量。这定义了组件的 '抓取' 部分。您可能希望根据外观来设置抽屉的样式以呈现合适的 '手柄'，但这当然不是必需的。

从版本 1.2.0 开始，有一个新的属性

• stops 是一个表示抽屉行程限制值的数组。该数组有四个元素：最小 y 值（即向上滑动时停止抽屉的点）、最大 y 值（向下滑动时停止）、最小 x 值和最大 x 值（左侧、右侧或对角锚点的最左和最右停止点）。此属性只能以完整数组的形式进行读取或写入。stops 属性的目的是允许采用的应用程序克服基于内容的计算停止的有时不一致的行为，以经验推导出的结果适应其所在的应用程序环境。

标准布局容器的属性也可以使用。
当然也可以通过 CSS 类应用样式选项，就像其他 Nativescript 组件一样。

代码

您可能更喜欢通过代码填充拉取显示内容的子树，尤其是如果您的动态内容非常高。

以下是一个例子：在 xml 标记中声明一个空的 PullReveal

    <pr:PullRevealContext> 
        <StackLayout> 
            <Image src="~/images/happyface.png"/>
            <Label text="Here is some content"/>
        </StackLayout>

        <pr:PullRevealDrawer id="pullDrawer"/>
    </pr:PullRevealContext>

并在代码中通过 Id 获取其实例，然后用您的内容项填充它。

    import {PullReveal, PullRevealPage} from 'nativescript-pull-reveal';
    const pullDrawer = page.getViewById('pullDrawer');
    const lbl = new Label();
    lbl.text = "Hello World";
    pullDrawer.addChild(lbl);
    //... and so on

插件演示应用通过“添加/删除 foobar 行”选项展示了此功能。点击此步进器向抽屉添加或删除子元素。

编程打开和关闭

可以通过处理程序调用 open() 和 close() 方法来控制抽屉在操作过程中的行为。

例如，考虑一个下拉控制面板场景。在此面板上，有几个操作，作为按钮实现，其 'tap' 属性指向页面代码中的处理程序。在处理程序函数操作结束时，它调用 PullReveal 的 close() 方法来关闭抽屉。类似于以下内容

export function handleSetting (args) {
    // assumes pullDrawer was defined previously
    //... handle the action the button represents
    // close the drawer
    pullDrawer.close()
}

没有参数的 close() 函数将立即关闭抽屉，没有动画。但是，您可以传递一个可选参数，包含门应该动画关闭的毫秒数。因此 pullDrawer.close(2000) 将在 2 秒时间内关闭门。

还有一个可以调用来编程打开 PullReveal 抽屉的 open() 方法。类似于 close() 方法，它也可以接受一个可选参数，表示打开抽屉动画的时间（毫秒）。

这种效果可以作为通知载体，用于在特定类型的应用程序中将各种形式的信息呈现给用户。

插件演示应用在“自动打开和关闭”示例中展示了此功能。

构建和 API

PullRevealContext 继承自 GridLayout，因此具有该类的所有特性。它用于在页面中提供一个并行上下文，其中 Pull Reveal 抽屉可以滑动到内容上。

PullRevealDrawer 继承自 StackLayout，因此具有该类的所有特性。它用作添加到其中的内容的父容器。

PullRevealDrawer 定义了以下属性

这些属性可以在 XML 中定义，或在代码中以 PullRevealDrawer 对象实例的成员的形式进行读取/写入。

以及以下方法

CSS

示例应用程序使用 CSS 类来设置抽屉的样式，包括背景颜色或图形和填充值。您可以在自己的应用程序中创建并应用类似的类来按需设置抽屉的样式。

插件本身不提供任何 CSS 值。

已知问题

最初 1.0.0 版本是垃圾

不要使用 1.0.0 版本，因为它最多是一个失败的但具有启发性的原型。它存在多个结构性问题，并且仅在有限的上下文中工作。

1.1.0 版本是一个完全重写的方案。

与 iOS 的问题！

尽管如此，1.1.0 版本在 iOS 上仍然存在问题。
这些问题的核心已在上面列出，并在 GitHub 问题页面 上。

方向响应

当前版本 1.1.0 无法正确响应方向变化。

1.0.0 版本

• 在有限的演示上下文之外发现存在很多错误。
• 1.0.1 版本解决了一些问题，但最终并没有修复。
• 为了 1.1.0 版本，我们放弃了该方法并从头开始。

1.1.0 版本

• 在 Android 上运行良好。
• 在中等尺寸的 iOS 设备（使用 iphone 11 模拟器进行测试）上，演示上下文可以接受。

1.1.1 版本

• 与 1.1.0 版本相同，但升级以修复失败的 NPM 发布。

1.2.0 版本

• 引入了 stops 数组属性，作为应用程序采用控制抽屉位置限制的途径，而不是使用从内容计算出的值。这些值由于尚不清楚的原因，通常是不正确和/或在不同设备之间不一致的。请注意，这仅仅是将问题转移到应用程序领域，可能要求开发者使用经验性的试错技术来确定每个上下文应使用的适当值。这 不是 理想的，并且与该组件的原始意图相反，但它至少允许一种从否则无法解决的问题中解脱出来的方法。

源代码和贡献

请贡献，特别是如果您有改进此控件不足之处的想法！

此包的源代码维护在 GitHub 上：https://github.com/tremho/nativescript-pull-reveal

项目的结构基于使用 Nativescript 插件种子 项目生成的模板。

欢迎评论和贡献！请提交您的拉取请求，并提供尽可能多的解释和示例以支持您的更改。

悬而未决的问题和求助请求列表如下：https://github.com/tremho/nativescript-pull-reveal/issues

或者，您可以自由地给我发电子邮件至 [email protected] 以开始讨论其他建议。