Native Scriptでスライドするレイアウトの実装
先日、ハンバーガーメニューのアイコンをタップして、左からスライドしてメニューを表示するレイアウトを作ろうと挑戦したことを投稿しました。
今回、とても簡単な方法で、ハンバーガーメニューのアイコンをタップして、スライドして表示するレイアウトを実装できました。
私は、これまで何度も挑戦しているので、今回入力しませんでしたが、初めて行うときは、このコマンドが必要だと思います。
npm install -g nativescript
これで、NativeScript CLIをインストールします。
問題は、この後です。
今回は、オプションを入力しないで、そのまま入力してみました。
ns create
そうしたら、質問が出てきました。
アプリの名前をmyappと入力しました。
次に、どのスタイルのプロジェクトを作りたいか質問があります。
ここで、Vue.jsを選択しました。
つぎに、使うテンプレートの質問がありましたので、SideDrawerと答えました。
そして生成されたプロジェクトをipadで見てみたら、ちゃんとハンバーガーメニューのアイコンをタップして、スライドして表示するレイアウトが完成していました。
ns preview
こちらのコマンドを実行してブラウザ二表示されるQRコードをスマホで読み込ませると、予めインストールしておいたNative Script Previewが起動して、表示の確認ができます。
私は、Androidの実機が無いので、Android Studioを使って、エミュレーターでデバックできたらいいなあと思っています。
でもWindows11にインストールしたJDKのバージョンが合わないようです。
JDK23とJDK11の切り替えができると良いのですが。
こちらは、時間を見つけて調べようと思っています。
とりあえずスライドするレイアウトの画面を実装できたので、良かったです。
Discussion