はじめに
NativeScript でアプリのバージョン情報などを取得する方法。
TL;DR
- EddyVerbruggen/nativescript-appversion を使う
getAppIdSync():com.hoge.fugaなどgetVersionNameSync():1.0などgetVersionCodeSync():1.0.1(iOS),10001(Android) など
はじめに
NativeScript でデバイスの輝度(明るさ)を制御する方法。
TL;DR
- NativeScript/nativescript-brightness を使う
brightness.set({ intensity: <value> })で輝度設定(0(暗) <-> 100(明))brightness.get()で現在の輝度取得- 以下と組み合わせることで特定画面(or パーツ)の 表示/非表示/遷移 などの際に輝度調整が可能
- Application Lifecycle の
suspendEventなど PageやxxxxLayoutなどのloadやunloadイベント- Android: Android Activity Events
- iOS: iOS UIApplicationDelegate (UIApplicationDelegate | Apple Developer Documentation)
- Application Lifecycle の
はじめに
モバイルアプリ(スマホアプリ)の強制アップデート(アップデートのお知らせ)に関して調べたり、検討したりしたので簡易的なメモを残しておく
強制アップデート(アップデートのお知らせ)とは、↓のようなアプリ起動時に「最新版があるよ」と通知するようなやつ。
TL;DR
- 案1: 自サーバ内でバージョン情報を管理
- 案2: Firebase Remote Config
- 案3: アプリ内で App Store, Google Play にアクセス(スクレイピング)
- 案4: 案3’ と 案1(もしくは案2) との組合せ
- 案5: ライブラリを利用して実装
- NativeScript のみ: NativeScript AppSync
はじめに
NativeScript で入力範囲外エリアのタップでキーボードを非表示にする方法
TL;DR
- Android:
dismissSoftInput()を使う - iOS:
tns-core-modules/application/iosを使ってios.nativeApp.sendActionToFromForEvent('resignFirstResponder', null, null, null) ScrollViewあたりにtapイベントのハンドラとして設定- iOS は以下の問題があるため使用に注意
- ロングタップによる入力補助が上手く効かなくなる
- iOS 12以下だと入力エリアへのフォーカスが効かなくなる
はじめに
NativeScript(NativeScript-Vue) の ListView の表示を強制的に更新する方法。
シチュエーションとしては、「お知らせ一覧」のようなものがあって、詳細を確認したら未読アイコンが消える、というような状況。
「お知らせ詳細」から戻るボタンで ListView に戻ってきても、未読アイコンが消えずにかなりハマった。
なお、Android だと上記の問題は起きなかったため、主に iOS 向けの内容。
TL;DR
Pageのloadedイベントなどにハンドラを設定- ハンドラ内で
ListView.refresh()を実行する - NativeScript-Vue の場合は
$refsを使うと楽
はじめに
NativeScript(NativeScript-Vue) でプラットフォームごとにファイルやプロパティを切り替える方法。
チートシート
| 種別 | iOS | Android |
|---|---|---|
| View ファイル分割 | xx.ios.vue |
xx.android.vue |
| View 内で分岐 | <ios></ios> |
<android></android> |
| プロパティで分岐 | ios:prop |
android:prop |
| スタイルシートファイル分岐 | xx.ios.(s)css |
xx.android.(s)css |
| JS ファイル分岐 | xx.ios.js |
xx.android.js |
| JS 内で分岐 | isIOS |
isAndroid |
TL;DR
ios,androidをファイル名や、プロパティの prefix などに使う- 詳細は チートシート や各事例を参照
はじめに
NativeScript(NativeScript-Vue) で ActionBar を非表示にする方法。
TL;DR
- Showing or Hiding the ActionBar に記載
PageのactionBarHiddenプロパティをtrueに設定<Page actionBarHidden="true">
はじめに
NativeScript で Skeleton Screen を表示する方法。
TL;DR
- CSS で Skeleton Screen のアニメーションを作成
- Skeleton Screen を表示したい箇所に↑のクラスを適用
- 実レイアウトにあわせて
width,height,border-radiusなどを調整 - 本物のコンテンツを表示する際に Skeleton Screen は非表示にする
はじめに
NativeScript(NativeScript-Vue) で次入力欄にフォーカスする方法を整理した。
TL;DR
returnPressイベントにハンドラを設定- ハンドラ内で
getViewByIdとTextField.forcus()を使って次フィールドにフォーカス
- ハンドラ内で
TextFieldのreturnKeyType="next"は iOS では動作しない- tjvantoll/nativescript-IQKeyboardManager も NatvieScript v6.x 系は未サポートで動作しない
