Nativeを使ってモバイルアプリをつくることに挑戦しています。第五回目は、ボタンとテキストインプットの機能やスタイルについて、学んだことをまとめたいと思います。Nativeを使ったモバイルアプリの開発を進めています。)英語の講座ですが、JavaScriptとReactの基礎知識があれば、Android(Java)やiOS(Swift、Objective-C)のモバイルアプリの開発経験がなくても取り組める内容となっています。過去の記事は下記をご覧ください。クリッカブルなボタンをつくる今回は、クリックした時にコンソールにログを出力するボタンを作成し、モバイルアプリの画面に配置します。ボタンをクリッカブルにするためには、「Pressable」コンポーネントを使用します。(→公式のドキュメントはこちら)PrimaryButton.js関数(PrimaryButton)部分のコードは下記の通りです。Pressableタグでは、「onPress」「style」「android_ripple」の3つのProps(要素)を使用しています。onPressIn(タッチが行われた時)→onPressOut(タッチが離れた時)の後に呼び出されます。コンソールに「Pressed!」というログを出力する関数(pressHandler)を実行するようになっています。コンポーネントが現在プレスされているかの真偽値を受け取って、スタイルを適用する書き方になっています。「?」の後に真(クリックされいる)の場合、「:」の後に偽(クリックされていない)の場合のスタイルを記載します。Androidの場合のみ、クリックされた時の変化を設定することができます。今回は「color(色)」の指定をしています。「android_ripple」はiOSの場合適用されないので、スタイルを別途定義する必要があります。}上記の箇所が、ボタンがクリックされた時に適用されるスタイルです。「opacity」は、要素の不透明度を意味します。このスタイルを適用することで、見た目上クリックされたということが、ユーザー視点で分かりやすくなります。テキストインプットを制御する前回設置したテキストインプット項目に、新たに入力の制御やスタイルを追加していきます。(→「TextInput」コンポーネントの公式ドキュメントはこちら)StartGameScreen.js関数(StartGameScreen)部分のコードは下記の通りです。TextInputタグでは、「style」「maxLength」「keyboardType」「autoCapitalize」「autoCorrect」の5つのProps(要素)を使用しています。入力できる最大の文字数を制限します。開くキーボードのタイプを設定します。今回は「number-pad(数字のみ)」を指定しています。特定の文字を自動的に大文字にするように設定します。今回は「none(何も自動的に大文字にしない)」を指定しています。入力時のスペルミスを自動的に修正するかどうかを設定します。デフォルト値は「false(修正しない)」です。スタイル定義は下記の通りです。StartGameScreen.js(スタイル定義)今回は、テキストインプットとボタンをセンターに、そして、下にある二つのボタンを並列かつ均等に配置しています。}上記の箇所が、該当のコードです。Nativeの公式ドキュメントをご確認ください。justifyContent:主軸に沿う整列の方法を制御alignItems:交差軸に沿う整列の方法を制御flexDirection:配置の方向を制御flex:使用可能なスペースをアイテムが埋める割合スマホでの表示は、下記の画像のようになります。第五回では、実際に設置したボタンを動かしたり、配置に関するスタイルを整えたり、入力の制限を追加したりすることができました。Native、UIデザインamiko編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。プログラマーとしてもお仕事をしています。好きなことは、読書、音楽(主にジャズ)、旅行。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。「デザインどころ」とは。デザインの思考や技術を、日々の暮らしや働き方、生き方に生かしたい。そんな思いでこのブログを作りました。「デザインのあるところ」を探し、語り、つくる旅がはじまります。Themegraphy。