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?	数字	两个平台都支持	0.5	控制渐变颜色的alpha值。在Android上，将此设置为0将禁用淡入动画。在iOS上，如果设置了此值，它将替换为背景颜色的alpha值。

ModalStack

属性	类型	平台	默认值	描述
dismissEnabled	布尔值	两个平台都支持	true	如果设置为true，则允许在触摸内容框架外部时关闭模态
verticalPosition	字符串	两个平台都支持	中间	使用与VerticalAlignment相同的选项（"顶部" - "中间" - "底部" - "拉伸"）
horizontalPosition	字符串	两个平台都支持	居中	使用与HorizontalAlignment相同的选项（"左" - "居中" - "右" - "拉伸"）

布局

使用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版，2004年1月