Nativeを使ってモバイルアプリをつくることに挑戦しています。第七回目となる本投稿からは、UIとロジックを作り込んでいく過程をまとめていきたいと思います。Nativeを使ったモバイルアプリの開発を進めています。)英語の講座ですが、JavaScriptとReactの基礎知識があれば、Android(Java)やiOS(Swift、Objective-C)のモバイルアプリの開発経験がなくても取り組める内容となっています。過去の記事は下記をご覧ください。背景画像(ImageBackground)とグラデーション第六回では、LinearGradientコンポーネントを使って、グラデーション背景を作成しました。ShapeFactoryというサイトに掲載されているCSSを参考にして、下記のようにデザインし直しています。#ebebe7)参考にしたグラデーションのCSSは上記の通りです。‘#2049ad’」と設定しています。今回は、ImageBackgroundコンポーネント(→公式ドキュメントはこちら)を使って、モバイルアプリに背景画像を設定したデザインにしたいと思います。完成時の「App.js」ファイルのソースコードは下記の通りです。}});ImageBackgroundコンポーネントのPropsは、「source」でフォルダとファイル名を、「resizeMode」でフレームが画像の寸法と一致しない場合に、画像のサイズを変更する方法を指定しています。「resizeMode=”cover”」は、画像を均一にスケーリング(画像の縦横比を維持)することを意味します。「imageStyle」で画像のスタイルを設定しています。0.15」にしていますが、opacityプロパティは要素の透明度を指定する際に使用します。透明度は、0.0(完全に透明)~1.0(完全に不透明)の数値で表現されます。背景画像の透明度の設定の有無によって、画面の表示に上記のような違いが生じます。今回は2の透明度を設定したデザインを採用しました。入力テキストを判定してアラートを表示する次に、テキスト(数値)を画面入力して「Confirm(確認)」および「Reset(リセット)」ボタンを押下した際のロジックを作成していきます。ソースコードは下記の通りです。StartGameScreen.jsPrimaryButton.js今回決めた仕様は3つあります。99.」というアラートを表示する。number!」というログを出力する。1のアラート内にある「Okay」ボタン押下後、アラートを非表示にし、入力されている数値を画面からクリアする。「Reset」ボタン押下後、入力されている数値を画面からクリアする。confirmInputHandler関数内で、1と2を記述しています。if文で条件判定を行い、Alertコンポーネント(→公式ドキュメントはこちら)を使用して、タイトル、メッセージ、アラート内のボタン構成を指定しました。resetInputHandler」は、Okayボタン押下時のコールバック関数が「resetInputHandler(リセットボタン押下時処理)」であることを意味します。アラートの画面表示は上記のようになります。第七回では、ImageBackgroundコンポーネントとAlertコンポーネントの使い方を学ぶことができました。次回以降もモバイルアプリのUIとロジックの制作を進めていきたいと思います。Native、UIデザインamiko編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。プログラマーとしてもお仕事をしています。好きなことは、読書、音楽(主にジャズ)、旅行。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。「デザインどころ」とは。デザインの思考や技術を、日々の暮らしや働き方、生き方に生かしたい。そんな思いでこのブログを作りました。「デザインのあるところ」を探し、語り、つくる旅がはじまります。Themegraphy。