Nativescript ActionBar 自定义组件

Question

我正在尝试按照 here 所述创建自定义组件，以便在我的应用程序的不同位置重用操作栏及其逻辑。这是我设置的组件：

/components/header/header.xml

<ActionBar title="Title" class="{{ 'mode' == dark ? 'bg-dark' : 'bg-white' }}" loaded="loaded">
</ActionBar>

/components/header/header.ts

exports.loaded = (args) => {
    let page = <Page> args.object;
    let pageObservable = new Observable({
        'mode' : page.get('mode')
    });
    page.bindingContext = pageObservable;
}

然后我尝试使用这样调用它的组件：

some_view.xml

<Page 
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:header="components/header">

<header:header mode="dark"/>
<StackLayout>..</StackLayout>
...
</Page>

但是，导航到“some-view.xml”时出现以下错误：

Calling js method onCreateView failed
TypeError: Cannot read property frame of 'undefined'
File "data...../ui/action-bar/action-bar.js" line: 146

我是不是做错了什么？您基于ActionBar创建自定义组件成功了吗？

Answer 1

可能问题在于您试图在 /components/header/header.ts 文件的 loaded 方法中获取 Page 实例。 args 将 return 您引用的是 ActionBar 而不是 Page。另一方面，在使用 TypeScript 时，事件应该像这样定义 export function loaded(args){...}。在上面给出的代码中，您使用的是 JavaScript 语法。我附上示例代码，其中显示了如何创建自定义组件。

component/action-bar/action-bar.xml

<ActionBar loaded="actionbarLoaded" title="Title" icon="">
    <NavigationButton text="Back" icon="" tap="" />
    <ActionBar.actionItems>
        <ActionItem icon="" text="Left" tap="" ios.position="left" />
        <ActionItem icon="" text="Right" tap="" ios.position="right" />
    </ActionBar.actionItems>
</ActionBar>

component/action-bar/action-bar.ts

export function actionbarLoaded(args){
     console.log("actionbar loaded");
 }

主-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:AB="component/action-bar">
<Page.actionBar>
     <AB:action-bar />
</Page.actionBar>
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

主-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

Nativescript ActionBar 自定义组件

Nativescript ActionBar custom component

nativescript