nativeScript-moon-phase
Nativescript 插件,用于显示根据传递日期的月亮相位照片
npm i --save nativescript-moon-phase

npm npm twitter: @rakhayyat

NPM

Nativescript 月亮相位插件

此插件是我之前将公历日期转换为希吉历日期的插件的补充:https://github.com/rkhayyat/nativescript-hijri

Nativescript-moon-phase

月亮相位插件允许您显示特定日期的月亮相位。

安装

tns plugin add nativescript-moon-phase

使用

Typescript NativeScript

XML

<Page 
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:customControls="nativescript-moon-phase"
loaded="pageLoaded" class="page">

<StackLayout class="p-20">
<customControls:MoonPhase items="{{ DateValue }}" />
<DatePicker id="date" loaded="onPickerLoaded" dateChange="onDateChanged" verticalAlignment="center">
</DatePicker>
<Button text="Valider" tap="see"></Button>
</StackLayout>
</Page>

main-view-model

import {Observable} from 'tns-core-modules/data/observable';
import {Hijri} from 'nativescript-moon-phase';

export class HelloWorldModel extends Observable {
public monthText : string;
public DateValue: Date;

constructor(currentDate) {
super();

this.DateValue = currentDate;
}
}

main-page

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { DatePicker } from "tns-core-modules/ui/date-picker";
import {HelloWorldModel} from './main-view-model';
var view = require("ui/core/view");
var MainViewModel = require("./main-view-model");

let page;

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
page = <pages.Page>args.object;
page.bindingContext = new HelloWorldModel(new Date());
}

exports.see = function(args) {
var sender = args.object;
var parent = sender.parent;
var year = view.getViewById(parent,"date").year;
var month = view.getViewById(parent,"date").month
var day = view.getViewById(parent,"date").day;
var convertDate = new Date(year, month-1, day);
page.bindingContext = new HelloWorldModel(convertDate);
}

API

方法

方法 返回 描述
items 日期 传递给显示对应月亮相位图像的日期。

NativeBaguette 🥖

Rachid Al Kayat
rkhayyat