Nativescript ActionBar自定義組件

我正在嘗試創建一個自定義組件，如here所述，以便在應用程序的不同位置重新使用操作欄及其邏輯。以下是我已經設置的組件：Nativescript ActionBar自定義組件

/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的自定義組件？

來源

2016-10-31 Aaron Ullal

也許問題是你正試圖在/components/header/header.ts文件中的loaded方法中獲取Page實例。 args將返回您參考ActionBar而不是Page。另一方面，當使用TypeScript時，事件應該像這樣定義，如export function loaded(args){...}。在上面給出的代碼中，您正在使用JavaScript語法。我附上示例代碼，其中顯示瞭如何創建自定義組件。

組件/動作杆/動作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>

組件/動作杆/動作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>

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

來源

2016-11-01 06:56:23

Nativescript ActionBar自定義組件

回答

相關問題