はじめに
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 を参照
はじめに
Cordova で Android アプリエミュレータ起動時に PANIC: Missing emulator engine program for 'x86' CPU. となる場合の対処方法。
1 | $ cordova emulate android |
TL;DR
- cordova-android が未サポートの API level を指定したエミュレータを起動しようとしていることが原因
- Android Studio で cordova-android がサポートしている API level のエミュレータを作成
- 2020/06/04 時点では API level 27(Android 8.1) がサポート範囲内での最新
- デバイス指定でエミュレータ起動:
cordova emulate android --target="TARGET DEVICE"
はじめに
NativeScript(NativeScript-Vue) でアニメーションの利用方法。
TL;DR
- CSS アニメーション、コードでのアニメーションがある
- 公式ドキュメントが充実しているので読む
- CSS のショートハンドで上手く動かない場合は、各プロパティに分解してみると良いかも
はじめに
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で定義