@nativescript-community/ui-persistent-bottomsheet

NativeScript 插件，允许您轻松地将持久底部抽屉添加到项目中。

iOS 演示	Android 演示

目录

• 安装
• 配置
• API
  • 属性
  • 方法
• 在 Angular 中的使用
• 在 Vue 中的使用
• 在 Svelte 中的使用
• 在 React 中的使用
• 演示
• 演示和开发
  • 仓库设置
  • 构建
  • 演示
• 贡献
  • 更新仓库
  • 更新 README
  • 更新文档
  • 发布
  • 修改子模块
• 问题

安装

从您项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-persistent-bottomsheet

配置

为了使手势生效，请确保在主应用程序文件（例如 app.ts）中添加以下代码块

import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();

API

属性

方法

在 Angular 中的使用

将模块导入到您的项目中。

import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";

@NgModule({
    imports: [
        PBSModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }

然后在您的组件中添加以下内容

<BottomSheet>
    <StackLayout backgroundColor="white">
      <Label text="This is the main content"></Label>
    </StackLayout>
    <GridLayout bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content"></Label>
    </GridLayout>

   
</BottomSheet>

对于更完整的示例，请查看 demo-ng 目录。

在 Vue 中的使用

在您的 app.js 中注册插件。

import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);

在您的 webpack 配置文件顶部添加以下内容

const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');

NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {
    model: {
        prop: 'stepIndex',
        event: 'stepIndexChange'
    }
});

然后在您的组件中添加以下内容

<BottomSheet>
    <StackLayout backgroundColor="white">
      <Label text="This is the main content" />
    </StackLayout>
    <GridLayout ~bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content" />
    </GridLayout>

</BottomSheet>

对于更完整的示例，请查看 demo-vue 目录。

在 Svelte 中的使用

在您的 app.ts 中注册插件。

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();

然后在您的组件中添加以下内容

<bottomsheet>
    <stacklayout  backgroundColor="white">
      <Label text="This is the main content" />
    </stacklayout>
    <gridlayout prop:bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content" />
    </gridlayout>

</bottomsheet>

对于更完整的示例，请查看 demo-svelte 目录。

在 React 中的使用

在您的 app.ts 中注册插件。

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();

然后在您的组件中添加以下内容

import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"

<BottomSheet>
  <stackLayout backgroundColor="white">
    <label text="This is the main content" />
  </stackLayout>
  <gridLayout nodeRole="bottomSheet" backgroundColor="white" height="70">
    <label text="This is the side drawer content" />
  </gridLayout>

</BottomSheet>

对于更完整的示例，请查看 demo-react 目录。

演示

此仓库包含 Angular、Vue.js 和 Svelte 演示。要运行这些演示，请在您的 shell 中执行以下命令

$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
$ cd ui-drawer
$ npm run i
$ npm run setup
$ npm run build && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 进行克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 不可用。

开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用的脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会总是工作（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

演示设置有些特别，如果你想要修改或添加演示，你不需要直接在 demo-[ng|react|svelte|vue] 中工作。相反，你需要在 demo-snippets/[ng|react|svelte|vue] 中工作。你可以从每个版本的 install.ts 开始，看看如何注册新的演示。

贡献

更新仓库

你可以很方便地更新仓库文件。

首先更新子模块。

npm run update

然后提交更改，然后更新公共文件。

npm run sync

然后你可以运行 yarn|pnpm，如果有任何更改的文件，请提交。

更新 README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（你可以添加 -- --bump major 来强制发布主要版本）。只需运行即可。

npm run publish

修改子模块

该仓库使用 https:// 子模块，这意味着你无法直接将更改推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果你有任何问题/问题/评论，请随时创建一个问题或在 NativeScript 社区 Discord 中开始对话。