NativeScript Getters 插件

一个 NativeScript 插件，它添加了六个新的获取器 - 除了本地的 getViewById 方法之外 - 以通过标签、类型、类、属性、值对或样式检索一个或多个视图。

入门

先决条件

基础知识

• NativeScript 已安装并配置。（见 CLI 设置）
• 带有智能代码补全功能的 IDE。（见 VS Code）
• 一个可用的项目来使用此插件。（见 应用模板）

最低版本

• @nativescript/core，7.0.0 或更高版本
• @nativescript/android，7.0.0 或更高版本
• @nativescript/ios，7.0.0 或更高版本
• ECMAScript，2015 (ES6) 或更高版本

安装

在命令提示符或终端中，导航到您的应用程序根目录，然后运行以下命令之一以安装插件。（见 文档）

ns plugin add nativescript-getters

或者

npm install --save nativescript-getters

使用 --save 标志将插件添加到您的 package.json 文件中的依赖项。（见 文档）

使用方法

在您的 JavaScript 或 TypeScript 文件顶部导入插件。它只能导入到应用程序入口点文件中一次。（见 文档）

import 'nativescript-getters'

已将新方法添加到 Frame、Page、布局、标签页和文本类中。（见 方法）

示例

通过标签获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive
  const foundViews = page.getViewsByTags('Label', 'Button')

  console.log('action bar:', actionBar)
  console.log('found views:', foundViews)
}

可能的标签列表可以在 NativeScript API 文档的模块页面找到。（见 "类"）

通过类型获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const layouts = page.getViewsByTypes('layout')
  const foundViews = page.getViewsByTypes('field', 'list')

  console.log('layouts:', layouts)
  console.log('found views:', foundViews)
}

可用类型列表： bar、picker、view、layout、list、text、tab、field 和 form。（见 types.ts）

通过类获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const mainTitle = page.getViewsByClasses('h1')[0]
  const foundViews = page.getViewsByClasses('text-primary', 'font-italic')

  console.log('main title:', mainTitle)
  console.log('found views:', foundViews)
}

通过标识符获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')
  const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')

  console.log('debug ids:', debugIds)
  console.log('found views:', foundViews)
}

通过属性获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')
  const foundViews = page.getViewsByProperties('columns', 'width')

  console.log('texts:', texts)
  console.log('found views:', foundViews)
}

可能的属性名称列表可以在 NativeScript API 文档的视图页面找到。（见 视图页面）

通过值对获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const welcomeTexts = page.getViewsByValPairs(
    { name: 'text', value: 'Welcome' }
  )
  const foundViews = page.getViewsByValPairs(
    { name: 'columns', value: 'auto' },
    { name: 'width', value: '210' }
  )

  console.log('welcome texts:', welcomeTexts)
  console.log('found views:', foundViews)
}

可能的属性名称及其值的列表可以在 NativeScript API 文档的视图页面找到。（见 视图页面）

通过样式获取视图

export function navigatingTo(args: EventData) {
  const page = <Page>args.object
  const redViews = page.getViewsByStyles(
    { name: 'background', value: 'FF0000' }
  )
  const foundViews = page.getViewsByStyles(
    { name: 'visibility', value: 'collapsed' },
    { name: 'opacity', value: '0.5' }
  )

  console.log('red views:', redViews)
  console.log('found views:', foundViews)
}

注意：颜色名称（例如：红色或白色）将被 NativeScript 转换为十六进制。

可能的样式列表可以在 NativeScript API 文档的样式页面找到。（见 样式页面）

独立模式示例

import { getViewsByTags } from 'nativescript-getters'

export function standaloneMode(view: View) {
  const foundViews = getViewsByTags.call(view, 'Label', 'Button')

  console.log('found views:', foundViews)
}

有关 call() 的更多信息

• call、apply和bind的区别，作者：@hebashakeel
• Function.prototype.call()，作者：@MozDevNet

API

方法

所有方法除了原生的getViewById方法都返回一个视图数组。

原生方法

原生方法仅返回一个视图。其名称以单数形式（例如getView）书写。

已知问题

VSCode IntelliSense

如果出现以下TypeScript声明错误，您需要打开应用程序入口点文件（并保持打开状态）或点击已打开的文件标签。

Property 'getViewsBy...' does not exist on type 'View'. ts(2339)

VSCode IntelliSense现在会记住应用程序的入口点并识别新方法的声明。

Vue.js

插件可能与这些符号链接不兼容。这是因为webpack默认会将符号链接解析到其实际位置。

针对此问题的解决方案是手动在webpack中禁用符号链接解析

const config = {
  resolve: {
    // resolve symlinks to symlinked modules
    symlinks: false
  }
}

问题？想法？

如果您对nativescript-getters的工作方式有任何疑问或想提出改进建议，GitHub上的讨论标签是您应该去的地方。

然而，如果您遇到错误，您应该在问题中打开一个。

贡献

有关更多信息，请参阅CONTRIBUTING。

许可

在MIT许可下分发。有关更多信息，请参阅LICENSE。

联系方式

Benjamin Grand @bgrand_ch