はじめに

NativeScript(NativeScript-Vue) の ListView の表示を強制的に更新する方法。

シチュエーションとしては、「お知らせ一覧」のようなものがあって、詳細を確認したら未読アイコンが消える、というような状況。

「お知らせ詳細」から戻るボタンで ListView に戻ってきても、未読アイコンが消えずにかなりハマった。

なお、Android だと上記の問題は起きなかったため、主に iOS 向けの内容。

TL;DR

  • Pageloaded イベントなどにハンドラを設定
  • ハンドラ内で 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 で Skeleton Screen を表示する方法。

TL;DR

  • CSS で Skeleton Screen のアニメーションを作成
  • Skeleton Screen を表示したい箇所に↑のクラスを適用
  • 実レイアウトにあわせて width, height, border-radius などを調整
  • 本物のコンテンツを表示する際に Skeleton Screen は非表示にする
続きを読む

はじめに

NativeScript(NativeScript-Vue) で次入力欄にフォーカスする方法を整理した。

TL;DR

続きを読む

はじめに

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 iOS アプリで、ダークモード設定時にステータスバーの時刻やら電波マークやらが背景色と同化して見えなくなる場合の対処方法。

TL;DR

  • config.xml に以下を追加
    • 対応としては「ライトモードの強制」なので、本質的な対応ではない
1
2
3
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
<string>Light</string>
</config-file>
続きを読む

はじめに

Cordova iOS アプリでカメラ(apache/cordova-plugin-camera)のテキストを変更する方法。

デフォルトだと撮影後のボタンが「Retake」や「Use」(Use Photo だったかも)とかになっている。

TL;DR

  • config.xmlCFBundleDevelopmentRegionja_JP に設定する内容を追加
続きを読む

はじめに

Cordova iOS アプリで Deprecated となっている UIWebView から WKWebView へと移行する方法。

TL;DR

続きを読む

r17n


Softwear Engineer


Fukuoka