NativeScript 自定义旋转器

@voicethread/nativescript-custom-rotors

nativescript-custom-rotors 添加了易于使用的属性到常见的 {N} 视图中，使它们可以通过 iOS 可访问性自定义旋转器进行访问。可访问性自定义旋转器通过将来自不同容器和地理区域的视图关联到共同的 a11y 可访问组，为屏幕阅读器辅助导航提供了一个优雅的解决方案。请参阅 Apple WWDC2020 的此视频了解更多有关 iOS 可访问性自定义旋转器的信息

注意：此插件仅在 iOS 上工作。在 Android 上，插件功能将被忽略。

内容

• NativeScript 自定义旋转器
  • 内容
  • 安装
  • 扩展类
  • 使用
  • 高级使用
  • 许可证

安装

npm install @voicethread/nativescript-custom-rotors

扩展类

ViewBase 已扩展以下接口

interface RotorGroupItem {
  /**
   * @property rotorGroup
   * the name of the group that this view belongs to
   */
  rotorGroup: string;
  /**
   * @property rotorOrder
   * order within the rotor group. defaults to -1
   */
  rotorOrder: number;
}

ContentView 和 BaseLayout 已扩展以下接口

interface RotorContainerView {
  /**
   * @property rotorContainer
   * set the view as a RotorContainer
   */
  rotorContainer: boolean;
  /**
   * rotorGroups
   * a map<string,Array<View>> of rotor names and associated views
   */
  rotorGroups: any;
  /**
   * rotorGroupCallback
   * a map<string,Callback> of rotor names and callbacks to execute
   */
  rotorGroupCallbacks: Map<string, Callback>;
  /**
   * @function removeRotorItem
   * removes a view from it's rotor group
   */
  removeRotorItem: (item: ViewBase) => boolean;
  /**
   * @function insertRotorItem
   * inserts an item into a rotor group at a specified index
   */
  insertRotorItem: (item: ViewBase, index?: number) => boolean;
  /**
   * @function addRotorGroup
   * adds a rotor group to a container
   */
  addRotorGroup: (name: string, items?: Array<ViewBase>) => void;
}

使用

在 app.ts 中初始化自定义旋转器插件

...
import {initCustomRotors} from 'nativescript-custom-rotors'
initCustomRotors();
...
Application.run(...);

然后设置一个 ContentView 或 BaseLayout 作为 rotorContainer

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" rotorContainer="true" >
...
</Page>

或者，在代码中

export function navigatingTo(e:NavigatedData):void {
  const page = e.object as Page;
  page.rotorContainer = true;
}

@nativescript/custom-rotor 插件将遍历容器的子项以创建并添加到指定的组中

...
  <Button text="Group1 Button1" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group1"/>
  <Button text="Group1 Button2" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group1"/>
  <Button text="Group2 Button1" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group2"/>
  <Button text="Group2 Button2" tap="{{ testIt }}" class="btn btn-primary" rotorGroup="group2"/>
...

自定义元素也将被遍历，因此您不需要在单个 .xml 或 .ts/.js 文件中指定所有旋转器组。

高级使用

单个元素可以是自己的旋转器组的一部分，并且可以向自定义旋转器提供自定义处理。考虑一个用于提供项目评分的控件（受此 ios CustomRotors 教程的启发）。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" rotorContainer="true" >
...
<GridLayout id="rating-bar" rows="90, *" columns="*,*,*,*,*" accessible="true" rotorGroup="rating" row="1" col="1">
  <GridLayout class='rating-item' row="1" col="0">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="1" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="1">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="2" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="2">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="3" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="3">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="4" />
  </GridLayout>
  <GridLayout class='rating-item' row="1" col="4">
    <Label class='rating-text' horizontalAlignment='center' verticalAlignment='middle' text="5" />
  </GridLayout>
  <Label class='rating-desc' color="blue" text="dial rotor to 'rating' then flick up and down to change the rating" row="0" col="0" colSpan="5" textWrap="true"/>
</GridLayout>
...
</Page>

评分旋转器组功能可以使用类似以下方式处理

export function navigatingTo(d: NavigatedData): void {
  const page = d.object as Page;
  page.rotorGroupCallbacks.set('rating', ({ forward }) => {
    incrementOrDecrementRating(page, forward);
  });
}

let rating = 0;
function incrementOrDecrementRating(page: Page, increment: boolean): void {
  rating = increment ? Math.min(rating + 1, 5) : Math.max(0, rating - 1);
  const ratingBar = page.getViewById('rating-bar') as GridLayout;
  for (let i = 0; i < ratingBar.getChildrenCount(); i++) {
    const view = ratingBar.getChildAt(i);
    view.backgroundColor = i < rating ? 'green' : 'transparent';
  }
}

许可证

Apache 许可证版本 2.0