Nativescript ActionBar自定义组件-Java 学习之路

我正在尝试创建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的自定义组件？

1 回答

也许问题是你试图在 /components/header/header.ts 文件的 loaded 方法中获取Page实例 . args 将返回您对 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");
 }

main-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>

main-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();
}

回复于 2024-05-10T03:23:38+08:00

Nativescript ActionBar自定义组件

1 回答

相关问题