Nativescript Windowed Modal

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

安装

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?	number	both	0.5	控制遮罩颜色的透明度值。在 Android 上，将其设置为 0 将禁用淡入动画。在 iOS 上，如果设置了此值，它将被背景颜色的透明度值替换。

ModalStack

属性	类型	平台	默认值	描述
dismissEnabled	boolean	both	true	如果设置为 true，则允许在触摸内容框架外时关闭模态窗口
verticalPosition	string	both	middle	使用与 VerticalAlignment 相同的选项（"top" - "middle" - "bottom" - "stretch"）
horizontalPosition	string	both	center	使用与 HorizontalAlignment 相同的选项（"left" - "center" - "right" - "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 run demo.android，npm run demo.ios，npm run demo.ng.android 或 npm run demo.ng.ios

已知问题

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

许可

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