Nativescript Windowed Modal

此插件覆盖了 nativescript 的 showModal() 方法，使模态对话框在 Android 和 iOS 上看起来和表现一致。

仅适用于 NativeScript 5.x，对于较旧的 NS 版本请使用 1.0.3。

安装

tns plugin add nativescript-windowed-modal

用法

代码

在启动应用程序之前调用一次 overrideModalViewMethod() 并注册布局元素

JavaScript

var windowedModal = require("nativescript-windowed-modal")
windowedModal.overrideModalViewMethod()

Typescript+Angular

import { ExtendedShowModalOptions, ModalStack, overrideModalViewMethod } from "nativescript-windowed-modal"

overrideModalViewMethod()
registerElement("ModalStack", () => ModalStack)

您可以传递扩展选项，如下所示

mainPage.showModal("./modal", {
  context: "I'm the context",
  closeCallback: (response: string) => console.log("Modal response: " + response),
  dimAmount: 0.5 // Sets the alpha of the background dim
} as ExtendedShowModalOptions)

NativeScript-Vue

// main.js
import { ModalStack, overrideModalViewMethod, VueWindowedModal } from "nativescript-windowed-modal"

overrideModalViewMethod()
Vue.registerElement("ModalStack", () => ModalStack)
Vue.use(VueWindowedModal)

您可以传递扩展选项，如下所示

<script type="text/javascript">
  export default {
    methods: {
      openModalTap() {
        this.$showModal("./modal", {
          props: {},
          fullscreen: false,
          animated: true,
          stretched: false,
          dimAmount: 0.5 // Sets the alpha of the background dim,
        })
      }
    }
  }
</script>

属性

ExtendedShowModalOptions

属性	类型	平台	默认值	描述
dimAmount?	数字	两者	0.5	控制模糊颜色的 alpha 值。在 Android 上，将此设置为 0 禁用淡入动画。在 iOS 上，如果设置了此值，将用背景颜色的 alpha 值替换它。

ModalStack

属性	类型	平台	默认值	描述
dismissEnabled	布尔值	两者	true	如果设置为 true，则允许在触摸内容框架外时关闭模态对话框
verticalPosition	字符串	两者	中间	使用与 HorizontalAlignment 相同的选项（"left" - "center" - "right" - "stretch"）
horizontalPosition	字符串	两者	中心	使用与 VerticalAlignment 相同的选项（"top" - "middle" - "bottom" - "stretch"）

布局

将模态组件包装在 ModalStack 标签中，以在平台上以一致的方式布局元素，它还允许您在触摸框架外时关闭模态对话框

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:modal="nativescript-windowed-modal">
    <modal:ModalStack dismissEnabled="true" class="modal-container">
        <StackLayout class="modal">
            <Label text="Hi, I'm your modal" class="text-center" textWrap="true"/>
        </StackLayout>
    </modal:ModalStack>
</Page>

HTML (Angular)

<ModalStack dismissEnabled="true" class="modal-container">
  <StackLayout class="modal">
    <Label text="Hi, I'm your modal" class="text-center" textWrap="true"></Label>
  </StackLayout>
</ModalStack>

样式

您可能需要在 .css 中创建 .modal 和 .modal-container 类来设置边距、对齐和背景颜色

.modal {
  margin: 20;
  margin-top: 35;
  border-radius: 8;
  horizontal-align: center;
  vertical-align: middle;
  background-color: white;
}

.modal-container {
  padding: 25;
  padding-bottom: 10;
}

运行演示应用程序

克隆此存储库
cd src
npm install && npm run plugin.prepare
npm run demo.android 或 npm run demo.ios

变更日志

v5.0.6

修复布局错误

已知问题

Padding 不会应用于 ModalStack 的子元素，将其包裹在 StackLayout 中可以解决问题；
在某些情况下自动宽度有点问题，如果可能，请为 ModalStack 的子元素设置固定宽度；

许可证

Apache 许可证版本 2.0，2004 年 1 月