React Nativeのラジオボタンを、Pressableで作る
React Nativeラジオボタンガイド
React Nativeのラジオボタン：ライブラリなしのアクセシブルなグループ | We.Inc
React Nativeにはラジオボタンのコンポーネントがありません。accessibilityRoleのradioとaccessibilityStateのcheckedを使い、Pressableからアクセシブルなラジオグループを作ります。ライブプレビューとコード付きです。
React Nativeのコアにはラジオボタンのコンポーネントがなく、ユーザーインターフェースの一覧にあるのはButtonとSwitchだけです。Pressableで作りましょう。外側の円と内側の点を描き、選択中の値は親に持たせ、各選択肢にaccessibilityRole="radio"とaccessibilityState={{ checked }}を付けます。全体はaccessibilityRole="radiogroup"を付けたViewで囲みます。
ラジオグループのアクセシビリティprops
- 囲むView
- accessibilityRole
- "radiogroup"
- 各選択肢
- accessibilityRole
- "radio"
- 各選択肢
- accessibilityState
- { checked: true または false }
- 無効な選択肢
- accessibilityState
- { disabled: true } と、Pressableのdisabled prop
- 新しい代替手段
- role / aria-checked
- role="radio" と aria-checked。role は accessibilityRole より優先される
下は同じグループのWeb版です。対応するARIAロールを使っているため、ブラウザーのラジオボタンと同じように矢印キーで選択を移動できます。その下のパネルには、現在の選択で各選択肢がReact Nativeで持つpropsが表示されるので、スクリーンリーダーに何が伝わるかを確認できます。
- 親がstateに1つの値を持ち、各選択肢はそれと自分を比較します。
- 選択肢を押すと自分の値を渡してonChangeが呼ばれ、他の選択肢は自動的に選択解除されます。
- 各Pressableは自分をradioとして伝え、accessibilityStateでcheckedを報告します。
- 囲むViewはradiogroupとしてマークされ、質問文がラベルになります。
- 小さな円だけでなく、ラベルを含めた行全体を押せるようにしましょう。
- hitSlopや余白を加えて、それぞれのタップ領域を親指で押しやすくしましょう。
- styleの関数のpressedフラグを使い、stateが更新される前にすぐ反応を返しましょう。
- あらかじめ選択しておくのは、本当に安全な答えが1つある場合だけにしましょう。そうでなければグループを空にしておき、検証します。
- 選択肢がおよそ7つを超えるなら、円の列よりドロップダウンのほうがたいてい読みやすくなります。
よくある質問
React NativeにRadioButtonコンポーネントはありますか？
ありません。公式のコンポーネントページで、ユーザーインターフェースのコントロールとして挙げられているのはButtonとSwitchだけです。ラジオボタンは自分のPressableのコードか、インストールしたUIキットから用意します。
スクリーンリーダーは、円がラジオボタンだとどう判断しますか？
PressableにaccessibilityRole="radio"とaccessibilityState={{ checked: isSelected }}を設定します。ドキュメントでは、radioロールはラジオボタンを、radiogroupはそのグループを表すと説明されています。
代わりにroleとaria-checkedを使うべきですか？
どちらでも動きます。React Nativeはrole="radio"とaria-checkedも受け付け、ドキュメントによると両方が設定された場合はroleがaccessibilityRoleより優先されます。どちらかのスタイルを選び、アプリ全体で統一しましょう。
ラジオボタンとSwitchのどちらを使うべきですか？
Switchは、すぐに反映される1つのオンとオフの設定に使います。ラジオボタンは、名前の付いた複数の選択肢からちょうど1つを選ぶためのものです。
自作する理由
- ラジオグループのコードはわずかです。行が1つ、円が2つ、比較が1つだけです。自分で書けばデザインに合い、バンドルに何も加わらず、選んだとおりのアクセシビリティpropsを持たせられます。
- 選択中の値を親に持たせると、グループは制御コンポーネントになるため、TextInputと同じようにフォームの値オブジェクトに組み込めます。
円を描く
- リングには、幅と高さが等しく、枠線があり、borderRadiusがサイズの半分のViewを使います。その中に、選択されているときだけ小さな塗りつぶしのViewを描画します。
- リングはどちらの状態でも表示したまま、点だけを変えましょう。色だけで示す選択は、色覚に障がいのある人には見えにくくなります。
ラジオグループのコード
RadioGroupコンポーネント
コアコンポーネントだけを使います。親は、制御されたTextInputとまったく同じように、valueとonChangeを渡します。
画面での使い方
stateは画面が持つため、選択をフォームの他の項目と一緒に検証して送信できます。
通常配送
速達配送
店舗で受け取り
ラジオグループのプレビュー
配送方法
選択肢をクリックするか、グループにフォーカスがある状態で矢印キーを使ってください。
React Nativeで各選択肢が持つprops
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る