はじめに
NativeScript(NativeScript-Vue) Android で文字を上下中央寄せにする方法
TL;DR
Label
にloaded
ハンドラを設定- Android だったら
args.object.android.setGravity(17)
を実行17
はGravity.CENTER
の値
はじめに
NativeScript(NativeScript-Vue) で次入力欄にフォーカスする方法を整理した。
TL;DR
returnPress
イベントにハンドラを設定- ハンドラ内で
getViewById
とTextField.forcus()
を使って次フィールドにフォーカス
- ハンドラ内で
TextField
のreturnKeyType="next"
は iOS では動作しない- tjvantoll/nativescript-IQKeyboardManager も NatvieScript v6.x 系は未サポートで動作しない
はじめに
NativeScript(NativeScript-Vue) で NativeScript/nativescript-datetimepicker を使って、Locale を意識した DatePicker/TimePicker
TL;DR
tns plugin add nativescript-datetimepicker
でインストール- NativeScript-Vue は
Vue.use(DateTimePicker)
で準備 <DatePickerField locale="ja_JP" />
で日本向けの日付選択- その他プロパティは Features を参照
はじめに
NativeScript(NativeScript-Vue) でアニメーションの利用方法。
TL;DR
- CSS アニメーション、コードでのアニメーションがある
- 公式ドキュメントが充実しているので読む
- CSS のショートハンドで上手く動かない場合は、各プロパティに分解してみると良いかも
はじめに
NativeScript(NativeScript-Vue) で iOS の Status Bar の情報(時刻、電池量など)が表示されない場合の対応方法。
TL;DR
app/App_Resources/iOS/Info.plist
でUIViewControllerBasedStatusBarAppearance
をfalse
に設定
はじめに
NativeScript(NativeScript-Vue)で Dark Mode(iOS), Dark Theme(Android) に対応する方法。
TL;DR
- Android:
forceDarkAllowed
で Dark Theme のサポート有無を設定 - iOS:
UIUserInterfaceStyle
で Dark Mode を非サポートに設定可能(デフォルトで影響を受ける) - Dark Mode/Theme だと
.ns-dark
, Light だと.ns-light
が root-view に適用される @nativescript/theme
を使ってTheme.setMode(Theme.Light)
で強制変更もできる
はじめに
NativeScript(NativeScript-Vue) の Application Lifecycle について。
アプリの起動や終了、バックグラウンドへの移動などを検出して処理させることができる。
TL;DR
application.on(<event>, <handler>)
でイベント検出・ハンドラの設定- NativeScript-Vue の場合は
new Vue().$start()
を実行していればapplication.run
は実行不要
- NativeScript-Vue の場合は
- Android 専用イベント もある
- 詳細未確認
はじめに
NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示をする方法。
アプリ起動直後のページ(xxxx.vue
) 内の created
や mounted
で、$navigateTo
や $showModal
を使っても期待通りに動作しない場合の対応方法。
TL;DR
<Page @loaded="onLoaded">
のように NativeScript 側のloaded
イベントを使う- iOS でのモーダル表示(
$showModal
)はloaded
+setTimeout
で対応 - 参考: Can’t navigate/open modal/dialog on the ‘mounted’ hook · Issue #555 · nativescript-vue/nativescript-vue
はじめに
NativeScript(NativeScript-Vue) で ActionBar
/ActionItem
に FontAwesome などのアイコンフォントを使用する方法。
TL;DR
ActionBar
:title
プロパティは使わない- 下層に
XxxxLayout
とLabel
定義
ActionItem
:ios.systemIcon
,android.systemIcon
は使わない- 下層に
Label
で定義